axios拦截器的使用方法

很多时候我们需要在发送请求和响应数据的时候做一些页面处理，比如在请求服务器之前先判断以下用户是登录(通过token判断),或者设置请求头header，或者在请求到数据之前页面显示loading等等，还有在响应到数据的之后做一些判断，例如服务器返回401登录状态失效，需要重新登录的时候，跳转到登录页，请求成功后关闭页面loading等，这个时候我们就可以用到axios拦截器来做这一系列的事情。

axios拦截器分为请求拦截器和响应拦截器两种。

请求拦截器

axios.interceptors.request.use(config => { // 在发送请求之前做些什么，例如加入token
 ....... return config; }, function (error) { // 对请求错误做些什么
    return Promise.reject(error); });

响应拦截器

axios.interceptors.response.use(function (response) { // 在接收响应做些什么，例如跳转到登录页
 ...... return response; }, function (error) { // 对响应错误做点什么
    return Promise.reject(error); });

完整代码：

export function request(config) { // 1、创建axios实例
  const instance = axios.create({ baseURL: "http://106.54.54.237:8000/api/v1", timeout: 10000 }); // 2、axios的请求拦截器
 instance.interceptors.request.use( req => { Toast.loading({ // loading的时候禁止点击
        forbidClick: true, message: "加载中..." }); return req; //拦截完再发送出去
 }, err => { return Promise.reject(err); } ); // 3、axios的响应拦截器
 instance.interceptors.response.use( res => { // 保证最少500毫秒的加载时间
      setTimeout(() => { Toast.clear(); }, 500); return res.data; //拦截完再返回数据
 }, err => { return Promise.reject(err); } ); //发送真正的请求
  return instance(config); }

 https://blog.csdn.net/weixin_39378691/article/details/83750056