vue二次封装axios

路径 ./src/util/axios

// 根据环境变量区别接口的默认地址
import axios from 'axios'
import qs from 'qs' // 一般qs都在axios里面 
switch (process.env.NODE_ENV) {
    case "production":  // 生产环境的接口地址，名字任起
        axios.default.baseURL = 'http://api.kmsc.cn';
        break;
    case "test" :   // 测试环境的接口地址，名字任起
        axios.default.baseURL = 'http://192.168.37.1:8080'
        break;
    default:
        axios.default.baseURL = 'http://127.0.0.1:3030'  // 开发环境
}
// 设置超时时间和跨域是否允许携带凭证
axios.defaults.timeout = 10000;//10s
axios.defaults.withCredentials = true; // 不加在跨域的时候资源带不过去

// 设置请求传递数据的格式（看服务器要求什么格式）
// x-www-form-urlencoded
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringifg(data); // qs第三方库把data转换成上面的格式


//拦截器，设置请求拦截器,一般不用
//客户端发送请求 -> 请求拦截器  ->  服务器
//TOKEN校验（JWT）:接收服务器返回的token，存储到vuex/本地存储，每一次想服务器发送请求，我们都应该吧token带上
//
axios.interceptors.request.use(config => {
    //携带上token
    let token = localStorage.getItem('token')
    token && (config.headers.Authorization = token)
    return config        
}, error => {
    return Promise.reject(error)
});

//响应拦截器
//服务器返回信息 -> 拦截的统一处理 -> 客户端js获取到信息
//
//很多公司都不配以下代码，默认为200~299
//axios.defaults.validateStatus = status => {
//   //自定义响应成功的http状态码200~399
//    return /^(2|3)\d{2}$/.text(status)
//};

axios.interceptors.response.use(response => {
    return response.data
}, error => {
    let { response } = error
    if (response) {
        // 服务器最起码返回结果了，根据响应状态码进行处理
        switch (response.status) {
           case 401 : // 权限不够，一般未登录，可以跳转登录页面，或者弹窗之类
                break;
           case 403 : // 服务器拒绝执行 （token过期）
                break;
           case 404 : // 找不到页面
               break;
        }
    } else {
        // 服务器连结果都没有返回，不是断网就是服务器崩了
        if (!window.navigator.onLine) {
            // 断网处理：可以跳转到断网页面，可通过路由跳转或者其他方式跳转
            this.$router.go(-1)
            return
        }
        // 服务器崩了
        return Promise.reject(error)
    }
})

export default axios;

创建使用方法

./src/api/api.js

//这里数据请求的唯一入口

import axios from '../util/axios'
function login () {
    return axios.post('/login', {
        xxx: 'xxx'    
    })
},
function user () {
    return axios.post('/user', {
        xxx: 'xxx'    
    })
}
export default {
    api
}

main.js文件中引入

import api from './api/api'
Vue.prototype.$api = api

组件内使用

methods: {
    add ()({
        this.$api.api.login()
    })
}