JavaScript超时获取

由于缺乏超时和请求取消，fetch API一开始就成为批评的目标。尽管这些批评可能是公平的，也可能是不公平的，但你不能否认fetch API已经非常棒了。就像我们一直做的那样，如果一个功能缺失了，我们可以随时补上它。

我最近一直在考虑在获取超时中进行填充，并在此处找到了一个不错的获取/超时脚本。我对其进行了稍微修改，以防止fetch 调用then 和catch 回调执行其任务，因为我认为超时应由填充程序的Promise处理：

const FETCH_TIMEOUT = 5000;
let didTimeOut = false;

new Promise(function(resolve, reject) {
    const timeout = setTimeout(function() {
        didTimeOut = true;
        reject(new Error('Request timed out'));
    }, FETCH_TIMEOUT);
    
    fetch('https://davidwalsh.name/?xx1')
    .then(function(response) {
        // Clear the timeout as cleanup
        clearTimeout(timeout);
        if(!didTimeOut) {
            console.log('fetch good! ', response);
            resolve(response);
        }
    })
    .catch(function(err) {
        console.log('fetch failed! ', err);
        
        // Rejection already happened with setTimeout
        if(didTimeOut) return;
        // Reject with error
        reject(err);
    });})
    .then(function() {
         // Request success and no timeout
         console.log('good promise, no timeout! ');
    })
    .catch(function(err) {
    // Error: response error, request timeout or runtime error
    console.log('promise error! ', err);
    });

将此代码包装在一个名为中的函数中fetchWithTimeout，这样您就可以传入超时并获取URL /设置；由于人们喜欢以多种方式使用访存，因此我选择不创建通用函数，而只是提供基本逻辑。

许多人认为超时应该来自服务器，但是我们都知道前端开发人员并不总是能够控制请求的两端。如果您正在寻找提取请求超时代码段，请点击这里！