如何在JavaScript Promise中实现三次Fetch请求的故障转移？

嘿，这个需求其实很好扩展，核心就是利用Promise的链式调用特性，把每一次失败后的重试逻辑串起来就行～

一、直接扩展现有双链路代码 #

你现在的双链路逻辑已经跑通了，要加第三次请求，只需要在第二个请求的then块里继续判断响应状态，不满足的话就发起第三个默认请求即可。同时记得最后加个catch来处理所有链路都失败的情况，避免未捕获的错误：

fetch(url)
  .then(response => {
    if (response.ok) {
      return response;
    }
    // 第一个链接失败，尝试第二个
    return fetch(link + location);
  })
  .then(response => {
    if (response.ok) {
      return response;
    }
    // 第二个链接也失败，尝试第三个默认链接
    return fetch(defaultUrl);
  })
  .then(finalResponse => {
    // 处理最终成功的响应，比如转JSON
    return finalResponse.json();
  })
  .then(data => {
    console.log('获取数据成功:', data);
  })
  .catch(error => {
    // 三个链路全部失败，统一处理错误
    console.error('所有请求链路均失败:', error);
  });

二、更通用的可扩展方案（支持N次重试） #

如果以后可能需要增加更多链路，推荐把所有备选链接放到数组里，用reduce来串联Promise逻辑，这样后续加链路只需要在数组里新增元素，不用修改核心逻辑：

// 把所有备选链接按优先级存入数组
const fallbackUrls = [url, link + location, defaultUrl];

fallbackUrls
  .reduce((prevPromise, currentUrl) => {
    return prevPromise
      .then(response => {
        // 如果响应正常，直接返回，终止后续重试
        if (response.ok) return response;
        // 响应异常，抛出错误触发下一次重试
        throw new Error(`请求 ${response.url} 失败，状态码: ${response.status}`);
      })
      .catch(() => {
        // 上一次请求失败，尝试当前链接
        return fetch(currentUrl);
      });
  }, Promise.reject()) // 初始设为reject，触发第一个请求
  .then(finalResponse => finalResponse.json())
  .then(data => console.log('数据获取成功:', data))
  .catch(error => console.error('所有链路均失败:', error));

注意事项 #

• response.ok只判断HTTP状态码在200-299之间，如果你的场景需要兼容3xx重定向等情况，可以调整判断逻辑（比如检查response.status < 400）。
• Fetch API只有在网络故障或请求被浏览器阻止时才会触发reject，像404、500这类HTTP错误状态码不会自动reject，所以我们需要手动抛出错误来触发下一次重试逻辑。

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