创建axios拦截器

　　上一篇说axios并发的时候有提到 axios的请求统一管理是为了创建拦截器

具体说一下拦截器的创建

import Vue from 'vue';

import axios from 'axios';    //  引入axios

import { Message } from 'element-ui';  // 为了方便统一提示 引入element的Message

创建axios实例

　　const request = axios.create({

   　　 baseURL: myUrl , // api的base_url

   　　 timeout: 30 * 60 * 1000 // request timeout

　　})

　　request.__proto__ = axios;

 

/**

 * 创建请求拦截器

 */

request.interceptors.request.use(

    config => {

// 获取token 统一在请求的headers里面加入Access-Token

        const token = Vue.ls.get(ACCESS_TOKEN)

        if (token) {

            config.headers['Access-Token'] = token;

        }

        /** 清楚get方法的缓存：尤其是IE浏览器缓存 */

        if (config.method.toLocaleUpperCase() === 'GET') {

            if (!config.params) config.params = {};

            config.params['sendleTime'] = new Date().getTime();

        }

        return config;

    },

    error => {

        Message({

            message: '客户端请求错误: ' + error.message,

            type: 'error',

            duration: 3 * 1000

        });

        return Promise.reject(error)

    }

)

 

/**

 * 创建响应拦截器

 */

request.interceptors.response.use(

    response => {

        const res = response.data;

        const code = res.status,

        if (code !== 200) {//状态码 !=200时，统一处理异常

            return Promise.reject(res.msg);

        }else {

            return response.data;

        }

    },

    error => {

        let errMsg = "请求发生错误"

        Message({

            message: errMsg,

            type: 'error',

            duration: 3 * 1000

        })

        return Promise.reject(error)

    }

)