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)
            })
        };

创建fetchPromise

let fetchPromise=fetch(url,prama)

传入Promise.race()。其中最快完成的Promise会返回一个Promise结果，输出的Promise为resultPromise.

 Promise.race([timeoutPromise(2000),fetchPromise(url)])
            .then(resp=>{
                console.log(resp);
            })