要求

fetch 请求,3秒超时输出超时,不管成功与否,成功输出成功,失败输出失败。

考察实现：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)
            })
        };

创建fetchPromise

let fetchPromise=fetch(url,prama)

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

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

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



fetch的常见问题及其解决办法