Promise 是前端开发绕不开的基础概念，几乎每个异步场景都会用到它。

你可以把它理解成一句话：

这个结果现在可能还没返回，所以它先处于等待状态；等异步任务结束后要么成功，要么失败。

• 痛点1：经常遇到“Promise 变成 pending 后一直不变”，原因是未正确处理 resolve/reject 或者没有返回 Promise。
• 痛点2：对 “一个请求失败了其他请求还能继续吗？” 常有误解，

一、Promise 的三个状态

Promise 一共三种状态，如下图所示：

pending 待处理
fulfilled 已成功
rejected 已失败

刚创建的 Promise 默认是 pending

const p = new Promise => {});老实说，console.log;// Promise {  }

当异步任务成功时它会变为 fulfilled

const p = Promise.resolve;console.log，// Promise { : "成功" }

当异步任务失败时它会变为 rejected

const p = Promise.reject;console.log，// Promise { : "失败" }

主要规则：

• -只能从 pending → fulfilled / rejected
• -一旦进入最终状态。结果已定格，无法再回到 '=> fulfilled / rejected)
• -如果你看到 “仍然 pending”，检查是否缺少 resolve/reject 或者返回值错误。

二、为什么需要 Promise.all?

• 至于痛点。页面上需要展示多份数据，却总是串行请求导致加载时间拉长。
• 至于痛点，手写代码时总担心忘记并发写法而导致 bug。
• A) 当多个异步任务互不依赖时可以一次性并发执行，以节省网络时间；B) 如果想统一处理所有结果或统一捕获错误，更加简洁易维护。
• 说到举例，随机名言 + 随机图片 两个接口互不相关。若串行请求，总耗时 =，若并行则 ~ max。
• 这就是 `Promise.all` 的价值所在：同时发起所有请求，只要全部成功才算完成；若任意一个失败则整体失败。
至于提示。记住 `getRATP` 与 `getRatp` 大小写区分，否则面试中容易被发现错误！

三、串行写法：能用，但慢 ⚠️💤

js async function main { const story = await getStory;const ratp = await getRATP;} 至于执行顺序，发起 story 请求 等待 story 返回 再发起 ratp 请求 等待 ratp 返回 这就是串行. 假设每个接口耗时 1 秒，总耗时约 2 秒。明明两请求可同时进行，却因串行而浪费网络时间。

---

四、并发写法：`Promise.all` 闪亮登场 🚀🔥

js // 并发获取两个接口 const responses = await Promise.all,getRATP]);// 并发解析 JSON 数据 const result = await Promise.all));console.log，// 至于含义，
• 发起所有异步任务；说起来，
• 等它们全部 成功 后再一起返回结果数组；
• 若任意一个 失败，整个 Promise.all 会立即 reject。

---

五、`Promise.all` 的结果顺序 📜🔍

js Promise.all,getRATP]) .n => { console.log;// 始终是 getStory 的结果 console.log;// 始终是 getRATP 的结果 });

即使图片接口先返回，imageResponse 也一定是数组中的第二个元素。这种顺序性在处理多个接口数据并需要对应关系时非常关键。

---

六、为什么还要再写一层 `Promise.all`？🤔💡

至于原因。

1️⃣ 返回的是 对象，而不是最终 JSON 数据。

2️⃣ 调用 res.json 本身也返回一个 新的 Promise。

我们通常做两层并发：

层	用途
第一层	并发请求两个接口 → 得到 数组
第二层	并发解析 JSON → 得到真正的数据

这种“嵌套 Promise.all” 是经典模式。

---

七、错误处理：一条路走到底 ❌📉

js // 一旦任意 promise 被 reject，全局立即 reject 并把第一个错误传递给 catch Promise.all .n) .catch);

⚠️ 注意即使某个 promise 已经开始执行。也不会因为其它 promise 失效而被取消，只是其结果被忽略。如果你想让所有 promise 都完成后才收集无论成败，可使用 Promise.allSettled。

---

八、async/await 写法 🎯🛠️

js async function main { try { const responses = await Promise.all,getRATP]);const result = await Promise.all));console.log，} catch { console.error;} } main，

两种风格本质相同：

• .n.catch ↔︎ async/await + try/catch

至于选择依据，

场景	推荐
简短逻辑	链式写法更直观
条件分支多	async/await 更易读

---

九、面试怎么答？🧩🤝

问题“请解释一下 Promise.all。”

回答“Promise.all 接收一个数组 of promises，而且在 所有 promises 成功后一次性返回它们的结果数组；如果其中任何一个 fail，则立即 reject。并将第一个 failure 原因传递给 catch。”

---

问题“如果其中一个 request 失效，其余 request 会继续吗？”

回答“已启动的 promises 不会被自动取消。它们仍会继续执行至完成，只是我们已经在 catch 中收到 reject 并停止等待。”

---

这些回答涵盖了主要考点，让面试官感受到你对细节和整体流程都有清晰把握。

---

十、 ✨🚀

\r\r

知识点	结论 / 提示 / 小技巧
三种状态 《pending》《fulfilled》《rejected》	不可逆转原则： 只能从 pending → fulfilled / rejected。遇到持续 pending 时检查 resolve/reject 是否正确实现。怎么说呢，
`promise.n.catch` 与 async/await 区别?	本质相同： .n/.catch 对应 async/await+try/catch。短链式可以优先考虑 .n/.catch；复杂业务更推荐 async/await。同步易读度提高方式： 适配项目规范即可。\t \t \t \t \t \t \t \t \t  \t  \t  \t  \t  \t  \t  \t   ​ \t           ​​ ​
\ 使用 \	\r\r\r\r\r\r<\/span>\r\r\r\r\r\r<\/span>\r\r\r\r\r\r<\/span>\r\r\<\/section>\<\/body>\<\/html>">
) 错误处理策略 & 面试问答技巧	\. 一个 promise 错误，其余依旧执行吗?答案: .
# “最关键” : 把多个互不相关任务并行化，从而明显提高性能 #<\/th>
# 常用方法 : 在项目中统一使用 “全局错误收集器” + “全局 loading 管理器” #<\/th>
# ⚡️ 小贴士 🔑 #<\/th>
① 当 'request‑timeout' 时需手动 cancel -> fetch;② 尽量使用 'JSON.stringify';③ 'promise‑all‑settled' 可收集所有完成情况;④ 若想保持旧 API 请包装 'axios.get.n' .<\\/tr>

Caution: Your code may look fine but if any single request fails you’ll lose all results unless you use a different strategy such as . Please double-check your variable names!.