axios怎么中断请求,axios,请求拦截器怎么走失败的回调函数
在实际项目中，我们可能需要“摇一摇”的要求。本文主要实现了axios中请求的取消和重复请求的防止，具有一定的参考价值。有兴趣的可以看看。
目录
前言core ——CancelToken实际应用和包装的一些小细节
前言
在实际项目中，我们可能需要“摇一摇”的要求。这主要是为了防止用户在某些情况下短时间内反复点击一个按钮，导致前端反复向后端发送多个请求。这里我将列举两种常见的实际情况：
PC-用户双击搜索按钮，可能会触发两个搜索请求。移动端——由于移动端没有点击延迟，容易造成误操作或多操作，在有加载屏蔽的情况下仍有可能发生。所以要考虑前端的方法，防止重复请求。
核心——CancelToken
在Axios中取消请求的核心方法是CanelToken。官网文档中CancelToken的使用方法有两种，简单粘贴到这里，添加评论即可。
方法1:
const CancelToken=axios。CancelToken
const source=cancel token . source()；
axios.get(/user/12345 ，{
//必须为请求设置cancelToken。
cancelToken: source.token
}).catch(函数(抛出){
//如果请求被取消，进入方法判断。
if (axios.isCancel(thrown)) {
console.log(请求已取消，thrown . message)；
}否则{
//处理错误
}
});
//取消上述请求
//source . cancel( messge )message是可选的，必须是字符串。
source.cancel(用户取消了操作。);
方法二：
const CancelToken=axios。CancelToken
让取消；
axios.get(/user/12345 ，{
//直接在选项中创建cancelToken对象
cancelToken: new CancelToken(函数执行器(c) {
取消=c；
})
});
//取消上述请求
cancel()；
实际应用和封装
上面已经举例说明了axios中的核心方法，但是在实际操作中，我们往往不会像官网的例子中那样使用它们，更多的时候是在axios的拦截器中做全局配置管理。在这种情况下，我们需要对上面的代码进行一些修改。
以下是我的总体认识：
我们需要缓存所有正在进行的请求。在发起请求之前，判断请求是否在缓存列表中进行，如果是，则取消该请求。任何请求完成后，您需要删除缓存列表中的请求，以便可以重新发送请求。之后，我们直接看代码。
//正在进行的请求列表
let reqList=[]
/**
*防止重复请求。
* @ param { array } req list-请求缓存列表
* @ param { string } URL-当前请求地址
* @param {function}取消-请求中断功能
* @ param { string } error message-请求中断时需要显示的错误消息。
*/
const stopprepeatrequest=function(请求列表，url，取消，错误消息){
const errorMsg=errorMessage
for(设I=0；i reqList.lengthi ) {
if(请求列表[i]===url) {
取消(错误消息)
返回
}
}
请求列表.推送(url)
}
/**
*允许请求继续。
* @param {array} reqList所有请求列表
* @param {string} url请求地址
*/
const allow request=function(reqList，url) {
for(设I=0；i reqList.lengthi ) {
if(请求列表[i]===url) {
reqList.splice(i，1)
破裂
}
}
}
const service=axios.create()
//请求拦截器
service . interceptors . request . use(
配置={
让我们取消
//设置cancelToken对象
config.cancelToken=新axios。CancelToken(函数(c) {
取消=c
})
//阻止重复的请求。当最后一个请求没有完成时，将不会提出同样的请求。
stopper request(req list，config.url，cancel，`{ config . URL }请求被中断`)
返回配置
},
err=承诺.拒绝(err)
)
//响应拦截器
服务.拦截器.响应.使用(
响应={
//增加延迟，短时间内不能重复发送同一个请求。
setTimeout(()={
允许请求(请求列表，响应.配置. url)
}, 1000)
//.成功申请后的跟进行动
//successHandler(响应)
},
错误={
if (axios.isCancel(thrown)) {
console . log(thrown . message)；
}否则{
//增加延迟，短时间内不能重复发送同一个请求。
setTimeout(()={
allowRequest(reqList，error.config.url)
}, 1000)
}
//.请求失败后的后续行动
//errorHandler(错误)
}
)
一些小细节
为什么没用前文方法2中的代码进行cancelToken设置？
axios的文档中有一个注释：
注意：您可以使用同一个取消令牌取消多个请求。
您可以使用同一个令牌取消多个请求。
所以我不想在每次请求之前都创建一个新对象。
务必使用方法2来确保每次取消的正确执行。在取消发生后，前面的方法将导致后续请求继续取消。
为什么在response中需要增加延迟？
因为你不希望用户在很短的时间内重复同样的请求。
请注意，在响应中阻塞请求和在请求中阻塞请求是两个概念：
请求是为了防止在最后一个请求未完成时启动同一个请求。
Response是在最后一个请求完成后阻塞同一个请求一段时间。
我能否在cancel时传递一个对象，而不仅仅是message？
按照官方的界面，是不可以的。你可以通过模仿官方源代码重新打包，或者使用第三方插件，或者使用另一种方法：将对象转换成JSON字符串，然后在需要的地方再转换回来。
这就是本文关于在axios中取消请求和防止重复请求的方法。有关在axios中取消请求和防止重复请求的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。