如何使用 Promise 链实现多个依赖型 fetch GET 请求-js教程-PHP中文网

如何使用 Promise 链实现多个依赖型 fetch GET 请求

本文介绍如何通过 Promise 链式调用，依次发起多个相互依赖的 fetch GET 请求，并在最终响应返回后安全赋值给 finalResult 变量。

本文介绍如何通过 promise 链式调用，依次发起多个相互依赖的 fetch get 请求，并在最终响应返回后安全赋值给 `finalresult` 变量。

在实际前端开发中，常需按顺序发起多个 HTTP 请求，且后一个请求的 URL 或参数需基于前一个请求的响应数据（例如：获取用户 ID → 获取该用户的订单列表 → 获取某订单的详情）。此时不能并发执行，也不能硬编码固定层数——而应采用可扩展的 Promise 链或更现代的 async/await 方案。

✅ 推荐方案一：Promise 链（清晰表达依赖关系）

以下代码严格遵循你提供的伪逻辑结构，每一步 .then() 接收上一步的解析结果，并返回下一个 fetch 调用，形成线性依赖流：

let finalResult = null;

fetch('https://api.example.com/user')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    return response.json();
  })
  .then(userData => {
    // 使用上一步返回的 userData 构造下一个请求地址
    return fetch(`https://api.example.com/orders/${userData.id}`);
  })
  .then(response => {
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    return response.json();
  })
  .then(orderList => {
    if (orderList.length === 0) throw new Error('No orders found');
    return fetch(`https://api.example.com/order/${orderList[0].id}`);
  })
  .then(response => {
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    return response.json();
  })
  .then(orderDetail => {
    finalResult = orderDetail; // ✅ 最终结果在此赋值
    console.log('✅ Final result:', finalResult);
  })
  .catch(err => {
    console.error('❌ Request chain failed:', err);
    // 可在此统一处理错误（如提示用户、跳转错误页等）
  });

? 关键要点：

每个 .then() 中若返回一个新的 Promise（如 fetch(...)），链会自动等待其 resolve 后再进入下一个 .then()；

建议始终校验 response.ok，避免将 4xx/5xx 响应误当作成功处理；

错误会穿透至最近的 .catch()，无需每个 .then() 单独 try-catch。

✅ 推荐方案二：`async/await`（更易读、支持动态数量）

若请求数量不固定（如根据数组长度动态发起 N 次依赖请求），推荐使用 async/await + 循环：

async function fetchDependentChain(urlsAndExtractors) {
  // urlsAndExtractors 示例：
  // [
  //   { url: '/user', extract: data => data.id },
  //   { url: id => `/orders/${id}`, extract: data => data[0]?.id },
  //   { url: id => `/order/${id}`, extract: data => data }
  // ]
  let result = null;
  for (const step of urlsAndExtractors) {
    const currentUrl = typeof step.url === 'function' 
      ? step.url(result) 
      : step.url;

    const response = await fetch(currentUrl);
    if (!response.ok) throw new Error(`Failed at ${currentUrl}: ${response.status}`);

    result = await response.json();
    if (step.extract) result = step.extract(result);
  }
  return result;
}

// 调用示例
fetchDependentChain([
  { url: 'https://api.example.com/user', extract: d => d.id },
  { url: id => `https://api.example.com/orders/${id}`, extract: d => d[0]?.id },
  { url: id => `https://api.example.com/order/${id}`, extract: d => d }
])
.then(data => {
  finalResult = data;
  console.log('✅ Dynamic chain completed:', finalResult);
})
.catch(err => console.error('❌ Dynamic chain error:', err));