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

Question

如果没有令牌，我想取消请求，所以我这样做：

instance.interceptors.request.use(config => {
  if (!getToken()) {
    console.log("interceptors: no access token");
  } else {
    config.headers.Authorization = "Bearer " + getToken().accessToken;
    return config;
  }
});

但是在负面情况下，会出现错误TypeError: Cannot read property 'cancelToken' of undefined。

Answer 1

因此，无论出于何种原因，这些答案都不适合我。这是所做的。

axiosInstance.interceptors.request.use(
  function (config) {
    const controller = new AbortController();
    const cfg = {
      ...config,
      signal: controller.signal,
    };
    controller.abort('We gotta cancel this');
    return cfg;
  },
  function (error) {
    return Promise.reject(error);
  },
);

我从中学到的东西：AbortController是 javascript/node 原生的。

Answer 2

您不能在拦截器内部使用令牌，而是抛出 Cancel

axios.interceptors.response.use(function (response) {
  throw new axios.Cancel('Operation canceled by the user.');
}, function (error) {
  return Promise.reject(error);
});

请参阅此帖子：https : //github.com/axios/axios/issues/583

Answer 3

我是这样实现的。我不确定这是否是最好的解决方案，但对于我的用例来说很有用。我的想法是不取消最后一个请求。我想取消先前对同一端点的请求，并让最后一个请求完成他的工作。因此，我会跟踪正在执行的请求。

// I keep track of the current requests that are being executed
const currentExecutingRequests = {};

axios.interceptors.request.use(
    (req) => {
        let originalRequest = req;

        if (currentExecutingRequests[req.url]) {
            const source = currentExecutingRequests[req.url];
            delete currentExecutingRequests[req.url];
            source.cancel();
        }

        const CancelToken = axios.CancelToken;
        const source = CancelToken.source();
        originalRequest.cancelToken = source.token;
        currentExecutingRequests[req.url] = source;

        // here you could add the authorization header to the request

        return originalRequest;
    },
    (err) => {
        return Promise.reject(err);
    }
);

axios.interceptors.response.use(
    (response) => {
        if (currentExecutingRequests[response.request.responseURL]) {
            // here you clean the request
            delete currentExecutingRequests[response.request.responseURL];
        }
        return response;
    },
    (error) => {
        const { config, response } = error;
        const originalRequest = config;

        if (axios.isCancel(error)) {
            // here you check if this is a cancelled request to drop it silently (without error)
            return new Promise(() => {});
        }

        if (currentExecutingRequests[originalRequest.url]) {
            // here you clean the request
            delete currentExecutingRequests[originalRequest.url];
        }

        // here you could check expired token and refresh it if necessary

        return Promise.reject(error);
    }
);

Answer 4

对于后来的 googlers，这是一个很好的解决方案，取自github 上的axios 问题

instance.interceptors.request.use(config => {
  /* some logic */
  return {
    ...config,
    cancelToken: new CancelToken((cancel) => cancel('Cancel repeated request'))
  };
});

这几乎是Vijay提出的，但形式更简洁。