如果fetch API支持超时配置

本来项目开发的过程中更习惯使用axios进行请求，偶然间我发现fetchAPI作为官方推荐使用的基于Promise封装的请求API，在项目中使用似乎会更规范一些，但因为一个业务需求引发了下面的一系列思考。试想一个场景：后端将多张图片以文件流的方式返回给前端而不是以http开头的存放地址，这时既要保证图片的请求及渲染速度，也要在部分大图还未获取到时直接终止请求避免不好的用户体验，所以肯定要基于fetch做一次简单的封装了，接下来说说实现方式。

使用 Promise 实现超时控制

接收一个默认的timeout参数，这里根据产品要求默认给到10s，再使用Promise在外包裹一层，内部设定一个定时器，在请求超时的时候reject这个Promise；这里我还定义了一个普通的fetchPromise，这个Promise可以和上面定义的Promise进行race竞速，看最先得到结果的是哪一个Promise从而返回这个Promise的响应，response中还需要考虑该请求是否成功，在成功的情况下才返回这个response。

function fetchWithTimeout(url, options = {}, timeout = 10000) {
    const timeoutPromise = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error('Request timed out'));
        }, timeout);
    });

    const fetchPromise = fetch(url, options);

    return Promise.race([fetchPromise, timeoutPromise])
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response;
        });
}

添加 AbortController 以支持取消请求

接下来还需要支持取消请求，其实官方已经提供了AbortController来支持取消请求了，这里只需要在上述代码的基础上按照官方给定的方式将signal添加到fetch的options就大功告成了。

function fetchWithTimeout(url, options = {}, timeout = 7000) {
    const abortController = new AbortController();
    const optionsWithSignal = { ...options, signal: abortController.signal };

    const timeoutPromise = new Promise((resolve, reject) => {
        setTimeout(() => {
            abortController.abort();
            reject(new Error('Request timed out'));
        }, timeout);
    });

    const fetchPromise = fetch(url, optionsWithSignal);

    return Promise.race([fetchPromise, timeoutPromise])
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response;
        });
}

使用示例

使用也很简单，和使用普通的fetch一样发起一个请求就好。通过这次简单的封装就完成了这个需求的一个环节，不过当我把展示图片功能完成的时候，又发现一个虽然没出错但一定要注意的问题，没错就是diff算法的key到底有什么用，或许某天自己再根据官方给出的答案自己总结一下发一篇文章吧。

fetchWithTimeout('https://myblog.xmcloud.buzz/data', {}, 5000)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Failed to fetch:', error));