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

最新推荐文章于 2024-05-04 12:09:24 发布

慕天远

最新推荐文章于 2024-05-04 12:09:24 发布

阅读量1.9k

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/Cui_xing_tian/article/details/102703928

版权

本文探讨了在使用Fetch API时如何实现超时处理，由于Fetch本身不支持超时设置，作者通过结合Promise和setTimeout，利用Promise.race()方法创建了一个超时Promise和fetch请求Promise，以达到在请求超时时能终止请求的效果。这种方法在处理网络不可靠情况下的请求超时问题时十分有用。

摘要由CSDN通过智能技术生成

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

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

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

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

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

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

创建timeoutPromise

 let timeoutPromise = (timeout)=> {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject('服务器地址不可用');
                }, timeout)
            })
        };<