使用fetch和Promise.all请求多URL时处理500等错误并改写箭头函数

// 封装带超时的fetch请求，默认超时时间8秒，可自行调整
function fetchWithTimeout(url, timeoutMs) {
  timeoutMs = timeoutMs || 8000;
  // 超时Promise，超时后抛出错误
  const timeoutPromise = new Promise(function(resolve, reject) {
    setTimeout(function() {
      reject(new Error('请求超时: ' + url));
    }, timeoutMs);
  });

  // 用Promise.race竞速，请求和超时哪个先返回就用哪个结果
  return Promise.race([
    fetch(url),
    timeoutPromise
  ]);
}

var openArticles = function(urlArray) {
  Promise.all(urlArray.map(function(u) {
    return fetchWithTimeout(u)
      // 先检查请求响应状态
      .then(function(response) {
        // 处理500类服务器错误
        if (response.status >= 500 && response.status < 600) {
          throw new Error('服务器错误，状态码: ' + response.status + '，地址: ' + u);
        }
        // 也可以根据需要添加4xx类错误的判断，比如：
        // if (response.status >=400 && response.status <500) {
        //   throw new Error('客户端请求错误，状态码: ' + response.status + '，地址: ' + u)
        // }
        return response.text();
      })
      // 可选：如果希望单个请求失败不影响其他所有请求，可打开下面的注释，返回错误标识而非直接抛出
      // .catch(function(err) {
      //   return {
      //     isError: true,
      //     url: u,
      //     errorMsg: err.message
      //   }
      // })
  }))
  .then(function(htmlArr) {
    // 所有请求全部成功时进入这里
    console.log('所有文章内容获取成功', htmlArr);
    console.log('第一篇文章内容：', htmlArr[0]);
  })
  .catch(function(error) {
    // 任意请求出现错误（超时、500、网络错误等）都会进入这里
    console.error('请求出现错误：', error.message);
  });
};

核心修改说明 #

• 替换了所有箭头函数为普通function()声明，符合使用习惯
• 新增了超时控制：通过Promise.race给每个fetch请求绑定超时逻辑，避免长时间等待无响应的请求
• 新增了HTTP状态校验：fetch默认只有网络层面的错误才会抛出异常，500/400这类HTTP错误需要手动检查状态码后主动抛出
• 解决了此前try/catch不生效的问题：同步的try/catch无法捕获Promise异步链里抛出的错误，在Promise链末尾加.catch()即可捕获所有异步错误，也可以改用async/await语法把异步逻辑转为同步写法再套try/catch
• 提供可选优化方案：如果不需要单请求失败就终止所有请求，可以打开代码里注释的单个请求catch逻辑，这样即使部分链接请求失败，也能拿到其他成功的结果

内容的提问来源于stack exchange，提问作者user1740058