封装axios

在写Vue项目的时候考虑到

1.访问后端接口的地方比较多

2.会在不同页面访问同一个后端接口

3.所有axios请求的超时、token、异常处理都一样

这三个因素，对axios做了一定的封装。

思路是统一的配置、异常处理用一个js文件封装。然后baseUrl相同的请求用一个js文件封装，对应后端的一个微服务或controller。

写这篇博客主要是总结一下封装axios时的一些写法及其目的，实现其实就是config+interceptors，没有超出github上的文档（https://github.com/axios/axios）提到的。

 

1.全局配置

默认配置，覆盖node_modules/axios/lib/default.js里的默认配置。

项目里用到了统一的超时、跨域和用header携带token。

import axios from 'axios';
import cookie from 'js-cookie';

axios.defaults.timeout = 1000;
axios.defaults.withCredentials = true;
axios.defaults.headers.common['Authorization'] = cookie.get('Authorization');

 

2.拦截器

拦截请求和响应，这里是返回promise让调用者进行异常处理。实际项目里的请求/响应异常我是直接判断http状态码/后端自定义异常状态码，直接在这里获取异常信息，用bus传到统一的异常处理组件。

axios.interceptors.request.use(
    config => {
        return config;
    }, error => {
        return Promise.reject(error);
    }
)

axios.interceptors.response.use(
    response => {
        // 返回Http状态码2xx
        console.log(response.status);
        return response;
    }, error => {
        // 返回其他状态码
        return Promise.reject(error);
    }
)

 

3.实例配置

会覆盖全局配置

import axios from './InitAxios';

const instance = axios.create({
    baseURL: 'http://localhost:8080/'
});

 

4.API方法

const getData = function (parameter) {
    return instance({
        url: 'data',
        method: 'post',
        data: parameter
    })
}