AJAX踩坑指南(知识点补充)-axios拦截器

时间:2024-03-23 15:02:16

作用:在请求发送之前,响应回来之后执行一些公共逻辑
在这里插入图片描述
在这里插入图片描述

请求拦截器

每次请求之前都会经过请求拦截器的代码,config中包含请求的内容
可以在请求拦截器中加入token(但是有一种情况,还没登录的时候,还没生成token,会造成js代码执行逻辑上的一些错误)

// 添加请求拦截器
axios.interceptors.request.use(config=> {
    // 在发送请求之前做些什么
    return config;
  }, err=> {
    // 对请求错误做些什么
    return Promise.reject(error);
  });


响应拦截器

可以统一处理token失效和数据剥离

// 添加响应拦截器
axios.interceptors.response.use(response=> {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, error=> {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
统一处理token失效

在这里插入图片描述

数据剥离

axios返回成功的res中只有一部分是后台返回给的数据,数据都是经过axios包装的数据
数据剥离就是将res.data.data.overflow—>res.data.overflow (在响应拦截器成功的函数中剥离data)