如何在JavaScript Promise链中按需替换Fetch请求并延续处理链？

方法一：复用Promise链式调用逻辑 #

把响应处理逻辑封装成可复用的函数，在第一个请求返回404时，直接返回新的fetch("bar.txt")Promise，让Promise链自动切换到这个新请求的结果：

// 封装通用的响应处理逻辑：检查状态并转换为ArrayBuffer
function handleResponse(response) {
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }
  return response.arrayBuffer();
}

fetch("foo.txt")
  .then(response => {
    // 仅当foo.txt返回404时，发起bar.txt的请求
    if (response.status === 404) {
      return fetch("bar.txt");
    }
    // 非404情况，直接返回原响应继续处理
    return response;
  })
  .then(handleResponse) // 统一处理foo或bar的响应
  .then(buffer => {
    // 这里延续你原来的后续处理逻辑
    console.log("处理完成的Buffer:", buffer);
  })
  .catch(err => {
    // 捕获所有错误：foo/bar请求失败、非2xx状态码等
    console.error("请求或处理出错:", err);
  });

方法二：用async/await简化逻辑（更直观） #

如果习惯同步风格的代码，可以用async/await实现同样的逻辑，可读性更高：

async function fetchWithFallback() {
  let response = await fetch("foo.txt");
  
  // 404时切换到bar.txt
  if (response.status === 404) {
    response = await fetch("bar.txt");
  }

  // 统一检查响应状态
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }

  // 转换为ArrayBuffer后执行后续处理
  const buffer = await response.arrayBuffer();
  console.log("处理完成的Buffer:", buffer);
}

// 执行并捕获错误
fetchWithFallback().catch(err => {
  console.error("请求或处理出错:", err);
});

关键说明 #

• Promise链的衔接：当then回调中返回一个新的Promise（比如fetch("bar.txt")），整个Promise链会等待这个新Promise完成，将其结果传递给下一个then，自然实现了逻辑的延续。
• 逻辑复用：把响应检查和转换的逻辑封装成函数，避免重复代码，同时保证foo和bar的响应处理规则一致。
• 错误覆盖：通过catch捕获所有异常场景，包括foo和bar都返回错误（比如bar也404）、服务器错误等。

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