让fetch支持timeout

2020-05-12

面试的时候遇到的一道题。原生fetch api不支持timeout，需要放fetch支持timeout。

一开始的想法是直接把fetch包一层，返回一个新的promise，这个promise受一个setTimeout的reject控制：

const myFetch = function(url, options, timeout) {
    return new Promise(function(resolve, reject) {
        fetch(url, options).then(resolve).catch(reject)
        setTimeout(function() {
            reject(new Error("timeout"))
        }, timeout)
    });
}

但是感觉面试官对这个答案不是很满意，想了下再写了一版：

const timeoutFetch = function(url, args, timeout) {
    return Promise.race([fetch(url, args), new Promise((resolve, reject) => {//这里主要巧妙运用Promise.race
        setTimeout(function() {
            reject(new Error('timeout'));
        }, timeout);
    })])
}

//使用：
timeoutFetch('https://www.google.com', {}, 1000)

持续改进：

//通过高阶函数，保持了fetch的参数列表不变，对业务代码的侵入性更低
const timeoutFetch = function(timeout) {
    return function(...args) {
        return Promise.race([
            fetch.apply(this, args), 
            new Promise((resolve, reject) => {
                    setTimeout(function() {
                        reject(new Error('timeout'));
                    }, timeout)
                 })
        ])
    }
};

//使用：
const tf = timeoutFetch(1000)
tf('https://www.google.com', {})

原先一直觉得Promise.race在工作中用得比较少（平时Promise.all用得比较多），没啥用。。看了这个后真的只能真香“女少啊” ：）