axios拦截器

拦截器作用是在每次发送请求和接受响应时能做相应的处理,比如发送请求带上token,响应时将数据二次过滤,做一些逻辑判断。

关键字 interceptors
axios.interceptors.requerst.use()拦截发送请求

axios.interceptors.response.use()拦截获取到的响应

附上我在开发实际项目中的代码

import axios from 'axios'
import {Message} from 'element-ui'
import store from '@/store'
//interceptor 拦截器
function interceptor(){
axios.interceptors.request.use(
    config => {
        const token = store.getters.getToken;
        token && (config.headers.Authorization = token);
        return config;
    },
    error => {
        return Promise.reject(error);
    }
)

axios.interceptors.response.use(
    response => {
        if(response.status === 200){
            return Promise.resolve(response.data);
        }else{
            return Promise.reject(response.data);
        }
    },
    error => {
        if(error.response.status){
            //401: 未登录  403 token过期
            switch(error.response.status){
                case 401:
                    Message.error("身份验证失败,请登录")
                    this.$route.replace("/login");
                    break;
                case 403:
                    Message.error("登录过期,请重新登录")
                    this.$route.replace("/login");
                    break;
                default: Message.error(error.response.data.message);
            }
            return Promise.reject(error.response);
        }
    }
)

}
export default interceptor;

 

上一篇:极客时间——设计模式之美 职责链模式(下):框架中常用的过滤器、拦截器是如何实现的?


下一篇:大数据小白必知必会之Flume实现过滤器效果