本文介绍如何通过 Promise 链（.then()）顺序执行多个相互依赖的 fetch GET 请求，确保后一个请求能安全使用前一个响应的数据，并最终将结果赋值给 finalResult 变量。
本文介绍如何通过 promise 链（`.then()`）顺序执行多个相互依赖的 fetch get 请求，确保后一个请求能安全使用前一个响应的数据，并最终将结果赋值给 `finalresult` 变量。
在实际开发中，常遇到需要“串行调用”多个 API 的场景：第二个请求的 URL 或参数依赖第一个请求的响应数据，第三个又依赖第二个……以此类推。此时不能并发发起请求（如 Promise.all），而需严格按序执行，并将上一环节的解析结果透传至下一环节。
最简洁、可读性强且符合 Promise 语义的方式是使用链式 .then() —— 每个 .then() 处理前一步的返回值，并可选择性地返回一个新的 Promise（例如新的 fetch 调用）。浏览器会自动等待该 Promise 完成后再进入下一个 .then()。
以下是一个典型三阶依赖请求的示例：
let finalResult = null;
fetch('https://api.example.com/v1/init')
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data1 => {
// 使用 data1 构建第二步 URL（如 data1.id）
return fetch(`https://api.example.com/v2/user/${data1.userId}`);
})
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data2 => {
// 使用 data2 触发第三步请求
return fetch(`https://api.example.com/v3/profile/${data2.profileId}`);
})
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data3 => {
finalResult = data3; // ✅ 最终结果赋值
console.log('✅ All done:', finalResult);
})
.catch(err => {
console.error('❌ Request chain failed:', err);
// 此处可统一处理任意环节的错误（网络失败、JSON 解析异常、HTTP 错误等）
});
✅ 关键要点说明：
- 每个
.then()接收上一个 Promise 的 resolved 值（如response或解析后的data）； - 若
.then()回调中return一个 Promise（如fetch(...)），链会自动等待其完成； - 所有
.then()中的throw或 rejected Promise 都会被后续.catch()捕获，实现集中错误处理； -
finalResult在最后一个.then()中安全赋值，此时所有依赖请求已成功完成。
⚠️ 注意事项：
- 避免在
.then()中直接写fetch(...).then(...)（即嵌套 Promise），这会破坏链式可读性并导致错误捕获失效； - 务必检查
response.ok，因为fetch只在网络错误时 reject，4xx/5xx 状态码仍会 resolve； - 若请求数量动态可变（如由数组长度决定），推荐改用
async/await+ 循环（见进阶方案），但链式.then()对固定小数量（如 2–5 步）依然清晰高效。
总结：Promise 链是处理线性依赖请求的经典范式。它语义明确、错误传播自然，无需额外库即可实现健壮的多步 API 编排。
