axios拦截器配置最全记录

axios 的拦截器配置方式网上已经很多，记录一下，自己总结的最全最好用的配置方式。

顺带记录一下登录鉴权验证token的携带，这里需要用到2个第三方插件库 yarn add history browser-cookies 主要是用来路由重定向和获取浏览器的token

1，一般都是在发送请求之前拿到登录时后台给返回的token，自己手动设置到拦截器里面的axios.interceptors.request

import JsonP from 'jsonp'
import axios from 'axios'
import { Modal, message } from 'antd'
import { createHashHistory } from 'history';
import browserCookie from "browser-cookies"
import api from "../views/api";

const history = createHashHistory();

axios.interceptors.request.use(config => {
 // 在这里也可以设置 token 如果拿到了。
 // browserCookie.set("token", request.headers.token)
    return config
}, error => {
    return Promise.reject(error)
})

2，对请求失败异常的拦截

axios.interceptors.response.use(response => {
    return response
}, err => {
        if (err && err.response) {
            switch (err.response.status) {
                case 400: err.message = '请求错误(400)'; break;
                case 401: return history.push('/login'); break;
                case 403: err.message = '拒绝访问(403)'; break;
                case 404: err.message = '请求出错(404)'; break;
                case 408: err.message = '请求超时(408)'; break;
                case 500: err.message = '服务器错误(500)'; break;
                case 501: err.message = '服务未实现(501)'; break;
                case 502: err.message = '网络错误(502)'; break;
                case 503: err.message = '服务不可用(503)'; break;
                case 504: err.message = '网络超时(504)'; break;
                case 505: err.message = 'HTTP版本不受支持(505)'; break;
                default: err.message = `连接出错(${err.response.status})!`;
            }
        } else {
            err.message = '连接服务器失败!'
        }
        message.error(err.message);
        return Promise.reject(err);
})