Ajax多步骤依赖需用Promise链或async/await实现串行执行，避免并发或同步阻塞；Promise链通过then()传递结果并统一catch错误，async/await则以同步语法简化流程并用try/catch集中异常处理。
Ajax 多步骤依赖的核心是“等前一步完成，再发下一步”，不能靠代码书写顺序来保证执行顺序，因为异步请求默认并发、不等待。关键在于用机制明确串行关系，而不是靠运气或同步阻塞。
用 Promise 链式调用串起依赖步骤
这是最常用也最清晰的方式：每个 then() 里发起下一个请求，并把上一步的结果传下去。
- 第一步请求成功后，返回新 Promise（比如发起第二步）
- 第二步的
then()自动等第一步 resolve 后才执行 - 错误统一用
catch()捕获，避免每步重复写 error 处理
示例：
fetch('/api/user')
.then(res => res.json())
.then(user => fetch(`/api/order?uid=${user.id}`))
.then(res => res.json())
.then(orders => console.log('订单列表:', orders))
.catch(err => console.error('任一环节失败:', err));
用 async/await 让流程像同步一样写
语法更简洁，逻辑更贴近直觉，适合步骤较多、中间需要处理数据或判断分支的场景。
立即学习“Java免费学习笔记（深入）”；
- 函数必须声明为
async - 每个依赖请求前加
await，它会暂停函数执行，直到 Promise settle - 可以用
try/catch包裹整个流程，集中处理异常
示例：
async function loadUserProfile() {
try {
const user = await (await fetch('/api/user')).json();
const profile = await (await fetch(`/api/profile?id=${user.id}`)).json();
const permissions = await (await fetch(`/api/perm?role=${profile.role}`)).json();
return { user, profile, permissions };
} catch (err) {
console.error('加载用户信息失败', err);
}
}
避免常见陷阱
有些写法看似合理，实则破坏了依赖关系：
- 并列写多个
fetch—— 它们会同时发出，不等前一个返回 - 只用变量赋值（如
let data; fetch(...).then(d => data = d)），然后直接用data发下个请求 —— 此时data还是 undefined - 设
async: false（jQuery 旧写法）—— 浏览器卡死，已废弃，不可用
复杂流程可考虑封装工具函数
如果项目中多处存在“查A → 用A结果查B → 用B结果查C”的模式，可以抽象成通用函数：
- 接受一个请求描述数组，每个项含 url 和从上一步提取参数的函数
- 内部自动串行执行，支持中断、超时、重试等增强能力
- 减少重复代码，提升可维护性
例如：sequentialFetch([ { url: '/api/login', data: creds }, { url: '/api/info', extract: res => ({ token: res.token }) } ])
