记录一次手动取消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) })
作者:黎明前的最后一颗星
链接:https://juejin.cn/post/7054469616143499300