如何实现数量可变且存在依赖的JavaScript Fetch GET请求？

针对你需要发起数量可变、后请求依赖前请求响应的Fetch GET请求，并在最后一次请求完成后为finalResult赋值的需求，提供两种直观的实现方案：

方法1：async/await + 循环（直观易读） #

利用await的顺序执行特性，逐个发起请求，每次用前一次的响应结果生成下一次请求的参数：

let finalResult = null;

// 自定义：根据前一次响应生成下一次请求的URL（替换为你的业务逻辑）
function getNextRequestUrl(prevResponse) {
  // 第一次请求使用初始URL，后续请求基于前一次响应拼接参数
  if (!prevResponse) {
    return 'https://api.example.com/initial-request';
  }
  return `https://api.example.com/next-request?key=${prevResponse.data.id}`;
}

async function executeFetchSequence(requestCount) {
  let prevResponse = null;
  // 按顺序发起指定数量的请求
  for (let i = 0; i < requestCount; i++) {
    const url = getNextRequestUrl(prevResponse);
    const fetchResponse = await fetch(url);
    // 解析响应（根据实际格式调整，比如text()/blob()等）
    prevResponse = await fetchResponse.json();
  }
  // 最后一次请求的结果赋值给finalResult
  finalResult = prevResponse;
}

// 调用示例：发起5个依赖请求
executeFetchSequence(5);

方法2：Promise.reduce 构建链式调用 #

用函数式写法，通过Array.reduce串联Promise链，逐个传递前一次的响应结果：

let finalResult = null;

// 指定需要发起的请求数量
const totalRequests = 3;

// 生成对应长度的数组，迭代构建请求链
Array.from({ length: totalRequests })
  .reduce(async (prevPromise) => {
    const prevResponse = await prevPromise;
    // 生成下一次请求的URL（替换为你的业务逻辑）
    const url = prevResponse 
      ? `https://api.example.com/next?token=${prevResponse.token}`
      : `https://api.example.com/first`;
    const fetchResponse = await fetch(url);
    return fetchResponse.json();
  }, Promise.resolve(null)) // 初始Promise，传递null作为第一次请求的前置值
  .then(lastResponse => {
    finalResult = lastResponse;
  })
  .catch(err => {
    console.error('请求序列出错:', err);
  });

关键说明 #

• 两种方案都保证请求顺序执行，必须等前一个请求完成并拿到响应后，才会发起下一个请求
• 核心逻辑是getNextRequestUrl（或方法2中的URL生成逻辑）：你需要根据实际业务，用前一次的响应结果生成下一次请求的参数（比如URL路径、查询参数、请求头等）
• 若需要错误处理，可在await处添加try/catch（方法1），或在Promise链末尾添加.catch()（方法2）

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