axios拦截器作用及工作流程详解

axios 拦截器

在请求或响应被then或catch处理之前拦截它们

作用:

主要是在axios请求和响应之前拦截请求和响应数据.拦截器有两种,请求拦截器一般会统一在请求头中添加token.响应拦截一般会处理异常错误信息,以及401跳转登录页

工作流程如图: 

实例代码:

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // config配置对象(请求报文):请求地址,请求方式,请求行,请求体
    // 判断有没有token 如果有就在请求头里添加
    if(localStorage.getItem('token')){
        config.headers.Authorization = localStorage.getItem('token')
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });


// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    // 统一处理错误信息
    Toast.fail(error.response.data.message)
    // 如果是401(没有token/token过期) 就跳转登录界面重新登录
    if(error.response.status === 401){
        location.href = './login.html'
    }
    return Promise.reject(error);
  });

页面发送请求先经过请求拦截器进行相应处理,成功后发送请求到服务器 

服务器返回数据也要先经由响应拦截器

在响应拦截器内可以统一处理服务器返回的错误信息

相应处理后由页面接收响应数据