拦截器

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

屏幕截图 2022-11-20 221325.png 拦截器的作用: 主要是在axios请求和响应之前拦截请求 拦截器有两种,请求拦截一般会统一在请求头中添加token 响应拦截一般会处理异常错误信息,以及401跳转登录页

拦截器的执行流程

屏幕截图 2022-11-20 221739.png