阅读 101

记录一次手动取消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

文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐