Axios：如何在请求拦截器中正确取消请求？

嘿，这个问题我之前也碰到过！你之所以会看到TypeError: Cannot read property 'cancelToken' of undefined这个错误，核心原因是当没有token的时候，你的请求拦截器函数没有返回任何值。

axios的请求拦截器要求你必须返回一个配置对象（config）或者一个Promise，否则后续的请求流程会拿到undefined，然后尝试读取它的cancelToken属性，自然就报错了。看你的代码，只有在有token的else分支里返回了config，而无token的if分支里只打了日志，啥也没返回——这就是问题所在！

既然你想要在无token时取消请求，那可以用这两种方法来修复：

方法1：用axios的CancelToken主动取消请求（推荐，符合你的需求） #

这种方式会直接终止请求，不会让无效请求发出去：

import axios from 'axios';

instance.interceptors.request.use(config => {
  const token = getToken();
  if (!token) {
    console.log("interceptors: no access token");
    // 创建取消令牌，主动取消当前请求
    const cancelSource = axios.CancelToken.source();
    config.cancelToken = cancelSource.token;
    cancelSource.cancel('请求取消：未获取到访问令牌');
  } else {
    config.headers.Authorization = `Bearer ${token.accessToken}`;
  }
  // 不管有没有token，都要返回config，避免undefined
  return config;
});

方法2：返回rejected的Promise终止请求流程 #

如果不需要用CancelToken，也可以通过返回一个失败的Promise来让请求直接进入错误处理：

instance.interceptors.request.use(config => {
  const token = getToken();
  if (!token) {
    console.log("interceptors: no access token");
    // 返回rejected的Promise，终止请求
    return Promise.reject(new Error('未获取到访问令牌，请求终止'));
  }
  config.headers.Authorization = `Bearer ${token.accessToken}`;
  return config;
});

两种方法都解决了拦截器无返回值的问题，同时实现了你“无token时取消请求”的需求。记住哦，请求拦截器的回调函数一定要返回有效值，不然很容易出现这类莫名其妙的undefined报错~

内容的提问来源于stack exchange，提问作者TotalAMD