拦截器的执行流程

75 阅读1分钟
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) {
    // 对响应数据做点什么
    // response响应对象(响应报文) : 响应状态码、响应头、响应体、请求配置
    return response;
  }, function (error) {
    // 对响应错误做点什么
    // (1)统一处理错误信息
    Toast.fail( error.response.data.message )
    // (2)如果是401 : 没token、token过期了, 就跳转登录页
    if( error.response.status === 401 ){
      location.href = './login.html'
    }
    return Promise.reject(error);
  });
  
  

运行流程如图所示

05-axios拦截器工作流程.png

06-使用axios拦截器处理token与401.png