vue-cli封装axios

为什么要封装axios我就不多说了，总而言之就是为了方便开发

配置

如果需要配置跨域代理的话，可以先看看我这篇文章：vue-cli配置跨域

全局方法

新建src/request/http.js

/**axios封装
 * 请求拦截、相应拦截、错误统一处理
 */
import axios from 'axios';
import router from '@/router'

// 环境的切换
//开发环境和部署环境
// const url = process.env.NODE_ENV === 'development' ? "http://168.0.0.119:8080" : "";
// axios.defaults.baseURL = url;
// axios.defaults.withCredentials = true; //让axios携带cookie
// 创建axios实例
var instance = axios.create({
    timeout: 1000 * 12
});
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/** 
 * 跳转登录页
 * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
 */
const toLogin = () = >{
    // 清除用户登录信息                 
    localStorage.removeItem('user');
    router.replace({
        path: '/login',
        query: {
            redirect: router.currentRoute.fullPath
        }
    });
}
// 请求拦截器
axios.interceptors.request.use((req) = >{
    return req;
},
error = >{
    return Promise.error(error);
})
/** 
 * 请求失败后的错误统一处理 
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status, other) = >{
    // 状态码判断
    switch (status) {
        // 401: 未登录状态，跳转登录页
    case 401:
        toLogin();
        break;
        // 403 token过期
        // 清除token并跳转登录页
    case 403:
        setTimeout(() = >{
            toLogin();
        },
        1000);
        break;
        // 404请求不存在
    case 404:
        break;
    default:
        console.log(other);
    }
}
// 响应拦截器
instance.interceptors.response.use(
// 请求成功
res = >res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
// 请求失败
error = >{
    const {
        response
    } = error;
    if (response) {
        // 请求已发出，但是不在2xx的范围 
        errorHandle(response.status, response.data.message);
        return Promise.reject(response);
    } else {
        // 处理断网的情况
        console.log('断网了') return Promise.reject('-1');
    }
});

export
default instance;

具体调用api方法

新建src/request/api.js

import axios from '@/request/http'; // 导入http中创建的axios实例
const base = {
    signIn: '/login/signin',
    //登录
    queryOrg: '/api/org/query',
    //获取组织
    addOrg: '/api/org/add',
    //增加组织
    editOrg: '/api/org/update',
    //修改组织
    delOrg: '/api/org/delete'//删除组织
    //......
}
//登录
const login = {
    signIn: (params) => { return axios.post(`${base.signIn}`, params) }
}
//组织
const org = {
    query: (params) => { return axios.get(`${base.queryOrg}`, { params: params }) },
    add: (params) => { return axios.post(`${base.addOrg}`, params) },
    edit: (params) => { return axios.put(`${base.editOrg}`, params) },
    del: (params) => { return axios.delete(`${base.delOrg}/${params}`) },
}
export default {
    login,
    org,
    //......
|'

使用

挂载

src/main.js

import api from '@/request/api' // 导入api接口
Vue.prototype.$api = api; // 将api挂载到vue的原型上

实际使用

this.$api.org.query(params).then(res = >{}).
catch(err = >{})