记录一次手动取消axios请求和请求超时处理

背景

最近公司进行业务系统的2.0版本的开发升级,在开发的过程中有一个这样的场景:对于ip进行验证 如果ip验证通过则展示某些内容,相反不展示 出现提示信息,看到这 很多人会说很简单 直接请求控制就完事了, 别着急还有呢,对于ip验证的请求,ip得验证接口不能超过30s 然后有人说加超时 很简单,没错 就是加超时,接下来又有问题了 加了超时后 请求没有remove掉 再次点击的时候,上次返回的请求响应有结果了 会造成页面的控制由上次的请求数据决定的并不是我们本次请求的数据决定了 这就有问题了。(大佬们都知道在这用请求取消)

原生js的请求取消和超时处理

let xhr =  new XMLHTTPRequest()
xhr.open('get',url)
xhr.onreadystatechange=function(){
if(xhr.readyState!=4)return
if(xhr.status===200){
 //成功
}else{
//失败
}
}
//超时
xhr.timeout=3000
xhr.ontimeout=function(){
//超时后的请求取消
xhr.abort()
}
xhr.send()

axios的请求取消和超时处理

const service= axios.create({
baseURL:"",//基础地址
timeout:""//超时时间
})
const cancelToken=axios.CancelToken //
let cancel //请求的变量
let promiseArr={} //取消请求的函数数组
service({
method:"请求方法",
data:{}//post请求数据
param:{} //get请求参数
url //地址
cancelToken:new Canceltoken(c=>{
//c 是请求的取消函数  
cancel=c
})
})
//请求拦截

service.interceptors.request.use(config=>{
if(promise[config.url]){
  promise[config.url]('函数已取消')  //取消上一次请求
  promise[config.url]=cancel
}else{
//添加到取消函数的map中
  promise[config.url]=cancel

}
})
//使用的时候
  promise[config.url]('函数已取消')
//如果对于单个请求的超时时间 和全局设置的超时时间不一致的话  我们可以通过promise和请求取消函数进行

new Promise((resolve,reject)=>{
this.$get(url).then(res=>{
//正常请求
resolve(res)
})

setTimeout(()=>{
//超时后取消请求,reject掉
  promiseArr[url](‘请求取消’)
},3000)

})

fatch 请求取消和超时

new Promise((resolve,reject)=>{
const controller = new AbortController();
const { signal } = controller;
new Promise((resolve,reject)=>{
fetch("http://localhost:8000", { signal }).then(response => {
    resolve(response)
}).catch(e => {
   reject('请求失败')
});
setTimeout(()=>{
//超时后取消请求,reject掉
 controller.abort();
 reject('超时')
},3000)
})