javascript - 我的这段不会取消请求,请问是什么问题? 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] = xhrxhr.then(    (response) => {        resolve(response.data);    },    (err) => {        if (axios.isCancel(err)) {            console.log('Request canceled:', err.message);        } else {              reject(err);          }    });

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

Answer 1

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

Answer 2

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

应为

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

Answer 3

看起来，你在使用 axios 的 CancelToken 来取消请求。但是在你的代码中，CancelToken 被正确地创建了，但是并没有正确地传递给请求。你创建了 source.token 并添加到了数据对象中，但是并没有将它传递给 axios.post 请求。

你应该将 cancelToken 作为第三个参数传递给 axios.post，就像这样：

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

在这段代码中，我们传递了一个配置对象作为第三个参数给 axios.post。这个配置对象包含一个 cancelToken 属性，其值就是我们之前从 CancelToken.source().token 获取的 token。这样，我们就可以使用这个 token 来取消请求了。