Promise：把异步任务变成可组合的结果

Promise 是 JavaScript 中用于异步编程的核心对象，用来解决传统回调函数导致的“回调地狱”问题。它代表一个尚未完成但未来会完成的异步操作（如网络请求、文件读取）的最终结果（成功或失败）。

## 目录 * [一、Promise 解决什么问题](#%E4%B8%80promise-%E8%A7%A3%E5%86%B3%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98) * [二、最小使用：先把主线跑通](#%E4%BA%8C%E6%9C%80%E5%B0%8F%E4%BD%BF%E7%94%A8%E5%85%88%E6%8A%8A%E4%B8%BB%E7%BA%BF%E8%B7%91%E9%80%9A) * [三、链式调用和错误传播](#%E4%B8%89%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8%E5%92%8C%E9%94%99%E8%AF%AF%E4%BC%A0%E6%92%AD) * [四、静态方法：一次处理多个异步任务](#%E5%9B%9B%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95%E4%B8%80%E6%AC%A1%E5%A4%84%E7%90%86%E5%A4%9A%E4%B8%AA%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1) * [五、asyncawait 和 Promise](#%E4%BA%94asyncawait-%E5%92%8C-promise) * [六、几个高频边界问题](#%E5%85%AD%E5%87%A0%E4%B8%AA%E9%AB%98%E9%A2%91%E8%BE%B9%E7%95%8C%E9%97%AE%E9%A2%98) * [七、总结](#%E4%B8%83%E6%80%BB%E7%BB%93) ## 一、Promise 解决什么问题 异步任务不会立刻得到结果。早期代码经常把后续逻辑放进回调函数，任务一多就会出现层层嵌套的“回调地狱”： ```javascript getUser(function (user) {   getOrder(user.id, function (order) {     sendEmail(order, function () {       console.log('完成');     });   }); }); ``` Promise 把“未来的结果”包装成一个对象，让后续动作通过 then 串起来，成功和失败也能沿着同一条链路传递。 一个 Promise 只有三种状态： \| 状态 \| 含义 \| \| \-\-\- \| \-\-\- \| \| pending \| 还没有结果 \| \| fulfilled \| 任务成功，拥有一个值 \| \| rejected \| 任务失败，拥有一个原因 \| 状态只能从 pending 变为 fulfilled 或 rejected，一旦落定就不能回头。后面再调用 resolve 或 reject，只会被当作“来晚了的消息”忽略。 ## 二、最小使用：先把主线跑通 先创建一个一秒后成功的任务： ```javascript const request = new Promise((resolve, reject) => {   setTimeout(() => {     resolve({ name: 'Ada', role: 'admin' });   }, 1000); }); request   .then((user) => {     console.log('请求成功', user);   })   .catch((error) => {     console.error('请求失败', error);   })   .finally(() => {     console.log('请求结束');   }); ``` ### 拆解这条 Promise 链 这段代码可以分成“创建任务”和“处理结果”两部分： 1. `new Promise` 接收一个执行器函数，并立刻执行它。执行器拿到 `resolve` 和 `reject` 两个控制函数。 2. `setTimeout` 模拟异步请求。请求成功时调用 `resolve`，把用户对象交给后续的 `then`。 3. `.then` 只处理成功结果；如果回调内部抛错，或者上游 Promise 已经 rejected，流程会跳到后面的 `.catch`。 4. `.catch` 负责处理错误。它处理完后，链条默认会恢复为 fulfilled；如果需要继续失败，就要在 catch 中再次抛出异常。 5. `.finally` 不接收成功值或错误原因，专门做收尾工作，例如关闭加载提示。 可以把结果想象成沿着传送带移动：`resolve(user)` 把箱子放上去，`then` 拆箱处理，`catch` 负责异常分拣，`finally` 负责关灯锁门。 resolve 负责交付成功值，reject 负责交付失败原因。实际项目里建议用 Error 对象作为失败原因，这样能保留错误类型和堆栈： ```javascript Promise.reject(new Error('网络不可用')).catch((error) => {   console.log(error.message); }); ``` ### 回调什么时候执行 即使 Promise 已经完成，then 的回调也会排到微任务队列中，不会插队到当前同步代码前面： ```javascript console.log('A'); Promise.resolve().then(() => console.log('C')); console.log('B'); // A // B // C ``` ## 三、链式调用和错误传播 ### then 返回一个新的 Promise then 的每次调用都会返回一个新的 Promise，因此可以把多个异步步骤串成一条链： ```javascript Promise.resolve(1)   .then((value) => value + 1)   .then((value) => value + 1)   .then((value) => {     console.log(value); // 3   }); ``` 回调的返回值决定下一个 Promise： * 返回普通值：下一个 then 收到这个值。 * 返回 Promise：下一个 then 等待它完成。 * 抛出异常：下一个 Promise 变成 rejected。 ```javascript Promise.resolve('用户')   .then((name) => Promise.resolve(name + '的订单'))   .then((order) => {     console.log(order); // 用户的订单   }); ``` 这条链的值变化是： ```text Promise.resolve('用户') → 第一个 then 返回 '用户的订单' → 下一个 then 收到 '用户的订单' ``` 每次 `then` 都会创建一个新的 Promise。回调返回普通值时，新 Promise 立即 fulfilled；回调返回另一个 Promise 时，新 Promise 会等待它；回调抛出异常时，新 Promise 会变成 rejected。链式调用之所以能接起来，靠的就是这个“返回值决定下一站”的规则。 ### catch 负责接住错误 catch 等价于 then(undefined, onRejected)，但链式写法更容易保证中间任意一步的错误都能被接住： ```javascript Promise.resolve()   .then(() => {     throw new Error('处理失败');   })   .catch((error) => {     console.log(error.message); // 处理失败   }); ``` ### finally 只处理收尾 finally 无论成功还是失败都会执行，且默认会把原来的值或错误继续传下去。它很适合关闭加载动画、释放锁和清理临时资源： ```javascript let loading = true; requestData()   .then(render)   .catch(showError)   .finally(() => {     loading = false;   }); ``` 如果 finally 自己抛出异常或返回 rejected Promise，它会覆盖前面的结果。因此清理代码也不要随便抛错。 ## 四、静态方法：一次处理多个异步任务 ### Promise.resolve 和 Promise.reject 它们用于快速创建已落定的 Promise。Promise.resolve 还可以把普通值或另一个 Promise 统一成 Promise： ```javascript Promise.resolve(100).then(console.log); // 100 Promise.reject(new Error('失败')).catch(console.error); ``` ### 四种组合方法对比 \| 方法 \| 什么时候成功 \| 什么时候失败 \| 结果顺序 \| 常见场景 \| \| \-\-\- \| \-\-\- \| \-\-\- \| \-\-\- \| \-\-\- \| \| Promise\.all \| 全部成功 \| 任意一个失败 \| 与输入顺序一致 \| 页面初始化的必需接口 \| \| Promise\.allSettled \| 总是等全部结束 \| 不会因为任务失败而 reject \| 与输入顺序一致 \| 批量上传、批量检查 \| \| Promise\.race \| 第一个落定的是成功 \| 第一个落定的是失败 \| 只返回一个结果 \| 超时提示、竞速 \| \| Promise\.any \| 第一个成功 \| 全部失败，抛出 AggregateError \| 只返回一个结果 \| 多个 CDN 或备用服务 \| #### Promise.all ```javascript const [user, menu] = await Promise.all([getUser(), getMenu()]); ``` 这里有两个容易混淆的时间点： * `getUser()` 和 `getMenu()` 在构造数组时就会被调用，所以两个任务会同时开始。 * `Promise.all` 等待全部成功，但返回数组的位置按照输入顺序排列，不会因为某个任务先完成就改变位置。 例如菜单接口先完成，结果仍然会放在第二个位置： ```text 输入：[getUser(), getMenu()] 完成顺序：menu → user 返回结果：[userResult, menuResult] ``` 所有任务会一起开始，返回数组仍然按照输入顺序排列，而不是按照完成先后排列。只要一个任务失败，整体就会 rejected；其他任务不会因此自动取消。 #### Promise.allSettled ```javascript const results = await Promise.allSettled([   upload('a.png'),   upload('b.png'), ]); for (const result of results) {   if (result.status === 'fulfilled') {     console.log('上传成功', result.value);   } else {     console.log('上传失败', result.reason);   } } ``` 每一项都有 status，成功项有 value，失败项有 reason。 #### Promise.race ```javascript const timeout = new Promise((_, reject) => {   setTimeout(() => reject(new Error('请求超时')), 3000); }); await Promise.race([requestData(), timeout]); ``` race 只决定“先把什么结果交给调用方”，不会取消已经开始的慢任务。要真正停止 fetch，需要配合 AbortController。 #### Promise.any ```javascript const mirror = await Promise.any([   fetchFrom('国内镜像'),   fetchFrom('海外镜像'), ]); ``` 只要有一个成功就成功；全部失败时，可以从 error.errors 中查看每个失败原因。 ## 五、async/await 和 Promise async 函数总是返回 Promise，await 只是让当前 async 函数暂停到目标 Promise 落定，线程并没有被阻塞。 下面两段代码表达的是同一条流程： ```javascript getUser()   .then((user) => getOrder(user.id))   .then((order) => console.log(order))   .catch((error) => console.error(error)); ``` ```javascript async function loadOrder() {   try {     const user = await getUser();     const order = await getOrder(user.id);     console.log(order);   } catch (error) {     console.error(error);   } } ``` 没有先后依赖的任务不要无意中串行执行： ```javascript // 串行：总耗时接近两个请求时间之和 const user = await getUser(); const menu = await getMenu(); // 并行：两个请求一起开始 const [user, menu] = await Promise.all([getUser(), getMenu()]); ``` ## 六、几个高频边界问题 ### 1\. then 里忘记 return ```javascript Promise.resolve(1)   .then((value) => {     value + 1; // 没有 return   })   .then((value) => {     console.log(value); // undefined   }); ``` 修复方式是返回结果： ```javascript Promise.resolve(1)   .then((value) => value + 1)   .then(console.log); // 2 ``` 箭头函数使用大括号时，需要显式写 `return`。第一段代码里的回调没有返回值，因此第一个 `then` 产生的新 Promise 会 fulfilled，但值是 `undefined`；第二个 `then` 读取到的自然也是 `undefined`。 ### 2\. forEach 不会等待 async 回调 ```javascript items.forEach(async (item) => {   await save(item); }); console.log('全部保存完成'); // 可能提前打印 ``` 需要等待全部任务时，使用 Promise.all： ```javascript await Promise.all(items.map((item) => save(item))); console.log('全部保存完成'); ``` 需要严格按顺序保存时，使用 for...of： ```javascript for (const item of items) {   await save(item); } ``` ### 3\. try\.\.\.catch 不能自动捕获未等待的 Promise ```javascript try {   Promise.reject(new Error('失败')); } catch (error) {   // 捕获不到，因为 reject 发生在当前同步代码之外 } ``` 使用 await 或 catch 把错误接回当前流程： ```javascript try {   await Promise.reject(new Error('失败')); } catch (error) {   console.log(error.message); } ``` ## 七、总结 * Promise 有 pending、fulfilled、rejected 三种状态，状态落定后不可逆。 * then 返回新 Promise，因此能链式调用；回调返回值、返回 Promise 或抛出异常，会分别影响下一步。 * catch 处理失败，finally 负责收尾；清理逻辑本身也要避免覆盖原始错误。 * all、allSettled、race、any 的区别在于“等谁、失败条件是什么、返回什么”。 * async/await 提高可读性，但不会自动并行；并行任务用 Promise.all，顺序任务用 for...of。 * race 不会取消输掉的任务，真正的取消需要额外的取消机制。