我的这段不会取消请求,请问是什么问题? axios怎么取消请求?

Question

这是我的axios依赖:

"axios": "^1.4.0",

这是我的代码

const source = axios.CancelToken.source();
data = {
    ...data,
    ...JSON.parse(localStorage.getItem('_TT_token')),
    cancelToken: source.token
}
const xhr = axios.post(url,data)
// 如果xhrMap中存在该url请求,则执行取消操作
if (xhrMap[url]) {
    source.cancel('Operation canceled by the user.')
}
xhrMap[url] = xhr
xhr.then(
    (response) => {
        resolve(response.data);
    },
    (err) => {
        if (axios.isCancel(err)) {
            console.log('Request canceled:', err.message);
        } else {
              reject(err);
          }
    }
);

这段代码有什么问题么?请求并不会取消

Answer 1

data = {
    ...data,
    ...JSON.parse(localStorage.getItem('_TT_token')),
    cancelToken: source.token
}
axios.post(url,data)

应为

axios.post(url, data, {
    cancelToken: source.token
})

Answer 2

Axios v0.22.0 开始，推荐使用 AbortController 来取消请求。这是基于 Fetch API 的标准方法。

const controller = new AbortController();
axios.get('/some/url', { signal: controller.signal })
.then(response => {
  // 请求成功处理
})
.catch(error => {
  if (error.name === 'AbortError') {
    // 请求被取消
    console.log('The request was aborted');
  } else {
    // 处理其他错误
  }
});

// 在需要取消请求的地方调用
controller.abort();

Answer 3

你应该先判断 xhrMap 里是否有缓存数据，然后再调用 axios.post 发起请求；而不是发起请求之后再取消。