axios拦截封装，让请求更加简单

背景：

  axios不进行封装也可以使用，但对于接口返回的状态要在每个请求里写一遍，代码重复量大，不利于维护。

开始：

  首先建一个request.js文件并在这个文件里引入axios和qs。
  用qs是为了将参数转换成字符串传给后端,因为axios默认有两种传参形式，一种是Format-Data，另一种是Request Payload，Request Payload形式如果前后端都不做处理，则后端拿不到请求参数。这个问题前端和后端都可以解决（前端详见：Vue axios发post请求后台接收不到参数的三种解决方案；据说后端接收参数时加上@RequestBody就可以，后端我不太懂，不做扩展了），只要有一方处理就好。
用之前当然要先安装一下：
npm install axios --save-dev
npm install qs --save-dev
安装完成后在request.js里引用

//request.js
import axios from "axios"
import qs from "qs"

接下来就可以创建axios实例了：

const request = axios.create({
    baseURL: 'http://xxx.com',  // api的base_url
    timeout: 5000  // 请求超时时间
});

如果是vue-cli初始项目的话，baseURL的值可以是process.env.BASE_URL。

请求拦截处理：

        request .interceptors.request.use(function(config){
            //在请求发送之前做一些事
            config.header['Authorization'] = '' + token // 让每个请求携带token-- ['X-TokenAuthorization']为自定义key 请根据实际情况自行修改

            //也可以给发请求时加一个loading的动画

            //当写java接口的童鞋不用@RequestBody接收参数时，传参就要靠自己了
            config.method === 'POST' || 'PUT' || 'PATCH' ? config.data = qs.stringify({...config.data}) : config.params = {...config.params};
            
            return config;
        },function(error){
            //当出现请求错误是做一些事
            return Promise.reject(error);
        });

最后就是把封装好的axios抛出去：

export default request 

简单封装就到这里了，更多配置参考axios文档，下面来看下怎么用：

//api.js
import request from './request'
 
export const getData = data => {
    return request ({
        url: '/api/xxx',
        method: 'post',
        data
    })
};