axios中取消请求情况分为1:取消该请求之后的相同请求;2:取消该请求之前的相同请求
##取消该请求之后的相同请求:
在使用 axios 发送请求时,如果在短时间内连续发送同一个请求,可能会出现请求结果混乱或重复响应的问题。为了避免这种情况,我们可以使用 axios 的取消请求功能,每次发送请求前先取消之前的请求。下面是使用 axios 取消请求的示例代码:
import axios from 'axios';
// 创建一个 CancelToken 对象
const source = axios.CancelToken.source();
// 发送请求
axios.get('/api/data', {
// 将 cancelToken 属性设置为上面创建的 CancelToken 实例
cancelToken: source.token
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
// 取消之前的请求
source.cancel('Duplicate request');
在上面的代码中,我们先创建一个 CancelToken 对象 source ,并将其传递给发送请求的 cancelToken 属性中。然后在需要取消之前请求的时候,调用 source.cancel() 方法即可。此时,后续的请求将不会被发送,以避免重复响应。
需要注意的是,如果在请求被取消之前,请求已经被发送并成功响应,那么该已经成功响应的请求结果无法被取消,因此也需要对已经成功响应的请求结果做好处理。另外,也需要处理请求被取消的异常情况,以避免出现错误。
##取消该请求之前的相同请求:
在 axios 中,取消上一次请求与取消前面的所有请求是有差别的。取消上一次请求,我们可以记录当前请求的 cancelToken ,然后在下一次请求之前发送一个取消请求的操作。而取消前面的所有请求,我们需要维护一份请求队列,然后在新的请求发起之前,将之前的所有请求都取消掉。
下面是一个实现取消前面的所有请求的例子:
import axios from 'axios';
// 创建一个请求队列
let pending = [];
const CancelToken = axios.CancelToken;
const removePending = (config) => {
for (let p in pending) {
if (pending[p].url === config.url + '&' + config.method) {
pending[p].cancel("request canceled");
pending.splice(p, 1);
}
}
}
// 添加请求拦截器
axios.interceptors.request.use(
(config) => {
removePending(config);
config.cancelToken = new CancelToken((c) => {
pending.push({ cancel: c, url: config.url + '&' + config.method });
});
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截器
axios.interceptors.response.use(
(response) => {
removePending(response.config);
return response;
},
(error) => {
return Promise.reject(error);
}
);
在上面的代码中,我们创建了一个请求队列 pending ,然后为请求配置添加了一个 cancelToken ,并将其推入请求队列中。在发送新的请求之前,我们遍历请求队列,将之前的所有请求都取消掉,并从请求队列中移除。同时,我们还需要在响应拦截器中将已经完成的请求从请求队列中移除。
需要注意的是,如果发送的请求是无法取消的,例如使用 jsonp 发送的请求,那么上面的代码将无法取消这类请求。因此,我们需要根据实际情况选择合适的方式来取消请求。
###取消之后再次发送请求提示被cancel怎么办?
如果在 axios 中取消了一个请求,那么再次发送同样的请求会提示 Cancellation 已经被取消的错误。这是因为 axios 同样的请求已经被 cancel ,因此无法再次发送。如果需要再次发送同样的请求,需要重新创建一个新的 cancelToken ,否则会一直提示被取消。
下面是一个重新创建 cancelToken 的示例代码:
import axios from 'axios';
let cancelToken = axios.CancelToken;
let cancel;
let config = {
method: 'get',
url: '/api/data',
cancelToken: new cancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
};
// 添加请求拦截器
axios.interceptors.request.use(
(config) => {
// 如果 cancel 存在说明上次请求被取消了,重新创建一个
if (typeof cancel === 'function') {
config.cancelToken = new cancelToken(function executor(c) {
cancel = c;
});
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 发送请求
axios(config)
.then((response) => {
console.log(response);
})
.catch((error) => {
if (axios.isCancel(error)) {
console.log('Request canceled', error.message);
} else {
console.log(error);
}
});
// 取消请求
cancel();
在上面的代码中,我们在发送请求前先创建了一个 cancelToken ,并将 cancel 函数保存下来。当发送请求时,我们检查 cancel 函数是否存在,如果存在说明上次请求被取消了,那么我们需要重新创建一个 cancelToken 并将其传递给新的请求中。这样就可以在取消请求后重新发送同样的请求了。
由于axios是对XHR对象的封装,如果请求已经被发送并且服务器已经接收到请求,那么cancelToken 在调用 abort() 方法取消请求可能会导致一部分数据已经被传输。因此,使用 时需要谨慎。文章来源:https://www.toymoban.com/news/detail-630776.html
fetch请求才可以做到真正意义上的取消!!!文章来源地址https://www.toymoban.com/news/detail-630776.html
到了这里,关于axios取消请求CancelToken的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!