[JavaScript知识库]学习提高：Vue通用封装axios，通过插件方式引入，RESTful api（Get、Post、Put、Delete封装）请求服务端请求拦截+响应拦截统一处理

最近在学习Vue进行项目开发，在进行请求后端接口的时候需要封装后端提高的Restful API接口；
一开始的方式是在我们的每个页面js进行引入
例如：

import {postRequest} from './utils/api'

this.postRequest("/xxx/edit", this.updateObj).then((resp) => {
   if (resp) {
        this.refresh = false;
    }
});

这种方式，会导致整个项目很多重复的代码，然后通过官网查看

Vue官网-插件

插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

• 添加全局方法或者 property。如：vue-custom-element
• 添加全局资源：指令/过滤器/过渡等。如 vue-touch
• 通过全局混入来添加一些组件选项。如 vue-router
• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

这样我们就可以在项目中采用插件方式进行统一管理维护api的封装；
示例：

api.js

// 引入axios，先安装npm install axios
import axios from 'axios'
import router from '@/router'

// 请求拦截器
axios.interceptors.request.use(config => {
    // 如果存在token，请求携带token
    if(window.sessionStorage.getItem('tokenStr')){
        config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
    }
    return config;
},error => {
    console.log(error);
    return;
});

// 响应拦截器
axios.interceptors.response.use(success => {
    // 业务逻辑错误
    if (success.status && success.status == 200) {
        if (success.data.code == 500 || success.data.code == 401 || success.data.code == 403) {
            Message.error({ message: success.data.message });
            return;
        }
        if (success.data.message) {
            console.log(success.data.message);
            // Message.success({ message: success.data.message });
        }
    }
    return success.data;
}, error => {
    // 接口访问失败
    if (error.response.code == 504 || error.response.code == 404) {
        Message.error({ message: '服务生气了' });
    } else if (error.response.code == 403) {
        Message.error({ message: '权限不足' });
    } else if (error.response.code == 401) {
        Message.error({ message: '尚未登录,请登录' });
        router.replace('/')
    } else {
        if (error.response.data.message) {
            Message.error({ message: error.response.data.message });
        } else {
            Message.error({ message: '未知错误!' });
        }
    }
    return;
});

let base = '';

// 传送json格式的post请求
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: base + url,
        data: params
    });
}

// 传送json的put请求
export const putRequest = (url,params) => {
    return axios({
        method: 'put',
        url: base + url,
        data: params
    });
}

// 传送json的get请求
export const getRequest = (url,params) => {
    return axios({
        method: 'get',
        url: base + url,
        data: params
    });
}

// 传送json的delete请求
export const deleteRequest = (url,params) => {
    return axios({
        method: 'delete',
        url: base + url,
        data: params
    });
}

main.js

// 插件形式引入
import {postRequest} from './utils/api'
import {putRequest} from './utils/api'
import {getRequest} from './utils/api'
import {deleteRequest} from './utils/api'


Vue.prototype.postRequest = postRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.getRequest = getRequest;
Vue.prototype.deleteRequest = deleteRequest;

通过上面的统一管理和配置，我们就可以在项目中的其他模块直接使用；

// 不需要每次引入，
this.postRequest("/xxx/edit", this.updateObj).then((resp) => {
   if (resp) {
        this.refresh = false;
    }
});

-------------欢迎各位留言交流学习，如有不正确的地方，请予以指正。【Q:981233589】

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖