axios 封装-CSDN博客

接口请求前可能要加小菊花，同时需要对返回的数据的状态码相应处理，比如登录过期，所以需要对axios二次封装

借鉴自该大神：https://blog.csdn.net/qq_30669833/article/details/81701588

原来博客园有插入代码的功能，我还傻逼似的用Tab.- -!

/*aixos封装处理*/
import axios from 'axios'
import router from '../../router.js'
import qs from 'qs'
import { Loading, Message } from 'element-ui';

var loadingInstance;
axios.interceptors.request.use(function(config) {
    // 显示loading
    loadingInstance = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    return config;
}, function(err) {
    errorState(err)
})

// 添加响应拦截器(对接口响应返回数据做点什么)----------------------------------------------------------------
axios.interceptors.response.use(function(res) {
    return res.data;
}, function(err) {
    errorState(err);
})

// 错误的统一处理---------------------------------------------------------------------------
function errorState(err) {
    loadingInstance.close();
    var e = (err + '').indexOf('timeout')>-1 ? '请求超时' : err + '';
    Message.error(e);
    return err;
}

// 封装数据返回成功提示函数(对后台返回状态码进行处理)---------------------------------------------------------------------------
function successState(res) {
    console.log(JSON.stringify(res))
    loadingInstance.close();
    if(res.code === '9001') {
        return res;
    }else if(res.code === '8001') {
        Message.error('8001！');
    }else if(res.code === '7001') {
        localStorage.removeItem('sid');
        router.push('/login');
    }else if(res.code === '6001') {
        Message.error('6001！');
    }else if(res.code === '5001') {
        Message.error('5001！');
    }else if(res.code === '4001') {
        Message.error('4001！');
    }else if(res.code === '3001') {
        Message.error('3001！');
    }else if(res.code === '2001') {
        Message.error('2001！');
    } else if(res.code === '1001') {
        Message.error('账号密码错误！');
    }else{
        Message.error('res.message');
    }
}

// 封装axios--------------------------------------------------------------------------------------
function apiAxios(method, url, params) {
    let httpDefault = {
        method: method,
        // baseURL: baseURL,
        url: url,
        params: method === 'GET' || method === 'DELETE' ? params : null,
        data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,
        timeout: 10000
    }

    return new Promise((resolve, reject) => {
        axios(httpDefault)
        .then((res) => {
            successState(res);
            resolve(res);
        }).catch((err) => {
            errorState(err)
            reject(err)
        })
    })
}

// 输出函数getAxios、postAxios、putAxios、delectAxios，供其他文件调用-----------------------------
// Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
export default {
    install: function(Vue) {
        Vue.prototype.getAxios = (url, params) => apiAxios('GET', url, params)
        Vue.prototype.postAxios = (url, params) => apiAxios('POST', url, params)
        Vue.prototype.putAxios = (url, params) => apiAxios('PUT', url, params)
        Vue.prototype.delectAxios = (url, params) => apiAxios('DELECT', url, params)
    }
}

main.js 里引入
import axiosJs from '@/assets/js/axios.js'
axiosJs.install(Vue);