如何使用请求拦截器取消localStorage无token时的网页接口请求？

AI 小北

2026-9-24

问题根因

你当前的请求拦截器在检测到无token时仍然返回了完整的请求配置对象，axios收到正常返回的配置后会按照逻辑正常发起请求，自然不会触发取消逻辑。

解决方案

根据你使用的axios版本选择对应的实现方式即可：

方案1：适用于axios v0.22及以上版本（推荐）

使用标准的AbortController终止请求：

instance.interceptors.request.use(async (req) => {
  const token = localStorage.getItem("token") || null;
  console.log(req.url);
  if (!token) {
    console.log("not exist token");
    // 构造终止控制器，直接终止当前请求
    const controller = new AbortController();
    req.signal = controller.signal;
    controller.abort("无有效token，请求已终止");
    return req;
  }
  console.log("token exist");
  req.headers.Authorization = `Bearer ${token}`;
  return req;
}, (error) => {
  return Promise.reject(error);
});

你也可以直接返回拒绝状态的Promise实现相同的效果：

if (!token) {
  console.log("not exist token");
  return Promise.reject(new Error("无有效token，请求已终止"));
}

方案2：适用于旧版本axios

使用axios自带的CancelToken实现取消：

import axios, { CancelToken } from 'axios';

instance.interceptors.request.use(async (req) => {
  const token = localStorage.getItem("token") || null;
  console.log(req.url);
  if (!token) {
    console.log("not exist token");
    const source = CancelToken.source();
    req.cancelToken = source.token;
    source.cancel("无有效token，请求已终止");
    return req;
  }
  console.log("token exist");
  req.headers.Authorization = `Bearer ${token}`;
  return req;
});