vue项目中封装axios

// 配置API接口地址
import { message } from "ant-design-vue";
var root = ‘http://xxx.xxx.xxx.xxx:8080/v1/‘
// var root = ‘http://xxx.xxx.xxx.xxx:8080/v1/‘
// 引用axios
var axios = require(‘axios‘)
if(window.localStorage.getItem(‘token‘)){
    axios.defaults.headers.common[‘Authorization‘] = ‘Bearer ‘+window.localStorage.getItem(‘token‘);
}
// 自定义判断元素类型JS
function toType (obj) {
    return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
    for (var key in o) {
        if (o[key] === null) {
            delete o[key]
        }
        if (toType(o[key]) === ‘string‘) {
            o[key] = o[key].trim()
        } else if (toType(o[key]) === ‘object‘) {
            o[key] = filterNull(o[key])
        } else if (toType(o[key]) === ‘array‘) {
            o[key] = filterNull(o[key])
        }
    }
    return o
}
 
/*
  接口处理函数
  这个函数每个项目都是不一样的，我现在调整的是适用于
  https://cnodejs.org/api/v1 的接口，如果是其他接口
  需要根据接口的参数进行调整。
  主要是，不同的接口的成功标识和失败提示是不一致的。
  另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
*/
function apiAxios (method, url, params, success, failure) {
    if (params) {
        params = filterNull(params)
    }
    axios({
        method: method,
        url: url,
        data: method === ‘POST‘ || method === ‘PUT‘ ? params : null,
        params: method === ‘GET‘ || method === ‘DELETE‘ ? params : null,
        baseURL: root,
        withCredentials: false
    })
    .then(function (res) {
    if (res.data.message === "成功") {
        if (success) {
            success(res.data)
        }
    } else {
        message.error(res.data.message)
        // setTimeout(() => {
        //     window.location.href = ‘http://‘ + window.location.host + ‘/login‘
        //     window.localStorage.clear();  
        // }, 1500);
        
        // if (failure) {
        //     // failure(res.data)
            
        //     // console.log(res.data)
        // } else {
        //     window.alert(‘error: ‘ + JSON.stringify(res.data))
        // }
    }
    })
    .catch(function (err) {
        // console.log(err.response)
        if(err){
            if(err.response){
                if(err.response.status){
                    message.error(‘服务器溜走了‘)
                }
            } else if(err.message === ‘Network Error‘){
                message.error(‘登录失效请重新登录‘)
                setTimeout(() => {
                    window.location.href = ‘http://‘ + window.location.host + ‘/login‘
                    window.localStorage.clear();  
                }, 1500);
            }
        }
        
    })
}
 
// 返回在vue模板中的调用接口
export default {
    get: function (url, params, success, failure) {
        return apiAxios(‘GET‘, url, params, success, failure)
    },
    post: function (url, params, success, failure) {
        return apiAxios(‘POST‘, url, params, success, failure)
    },
    put: function (url, params, success, failure) {
        return apiAxios(‘PUT‘, url, params, success, failure)
    },
    delete: function (url, params, success, failure) {
        return apiAxios(‘DELETE‘, url, params, success, failure)
    },
    axios:axios
}