Fetch 请求的超时设置与终止请求

最近在做一个项目,里面涉及到用户自定义服务器地址,这个服务器地址需要验证。原本请求用的是fetch。fetch本身并不支持超时处理,为了有较小的改动就能够实现超时的问题,我研究了一下。

在使用XMLHttpRequest可以设置请求超时时间,可是转用Fetch后,超时时间设置不见了,在网络不可靠的情况下,超时设置往往很有用

ES6以后Promise 出现解决地狱回调等不优雅的代码风格。个人理解这个更像是一个生产者和消费者的关系,查看 Promise文档,有以下两个方法

  1. Promise.race([promise1,promise2]) 传入多个Promise对象,等待最快对象完成
  2. Promise.all([promise1,promise2]) 传入多个Promise 对象,等待所有对象完成

有了以上知识后,结合函数setTimeout就可以实现超时设置

首先介绍下思路,核心就是利用建立一个超时的timeoutPromise和一个接口请求的fetchPromise,传入Promise.race()来进行处理。哪个Promise先返回结果则最终输出这个Promise的返回值。具体如下:

创建timeoutPromise

 let timeoutPromise = (timeout)=> {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject('服务器地址不可用');
                }, timeout)
            })
        };<
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值