至于前端异步主要，Promise 从入门到吃透

前言

在前端开发中。异步操作无处不在：定时器、接口请求、文件读取等。没有 Promise 之前。我们只能依靠回调函数处理异步逻辑但多个异步依次执行时就会陷入“回调地狱”，导致代码可读性、可维护性极差。

这篇文章从基础开始，帮助你彻底理解 Promise：从诞生背景、主要状态、基础用法、链式调用、错误捕获。到静态方法、事件循环、async/await 语法糖，覆盖日常开发与面试所有高频考点，一篇吃透 Promise。怎么说呢，

一、为什么需要 Promise？

. 回调函数与回调地狱

没有 Promise 时异步操作只能依赖回调函数实现：

setTimeout => {
console.log;},1000)，

当需要依次执行多个异步操作时代码会层层嵌套，形成回调地狱

setTimeout => {
console.log;setTimeout => {
console.log;setTimeout => {
console.log;},300)，},200);},100)，

. 回调地狱的痛点

• 代码嵌套极深，可读性极差
• 错误处理混乱。难以统一捕获
• 逻辑难以复用、组合
• 业务复杂后完全难以维护

Promise 正是为解决这些痛点而诞生的。怎么说呢，它是专门管理异步操作的对象。让异步代码写得像同步一样扁平清晰。怎么说呢，

二、Promise 主要：三种状态

Promise 实例一生只有三种状态。且状态一旦改变就不可逆。

. 三种状态详解

1. pending—— 刚创建时的默认状态。异步操作正在执行，既未成功也未失败。其实，
2. fulfilled—— 异步操作执行成功。状态从 pending → fulfilled。
3. rejected—— 异步操作执行失败，状态从 pending → rejected.

. 状态变化规则

• 仅两种合法变化：pending → fulfilled,pending → rejected
• Status changes are final—once fulfilled it cannot become rejected。and vice‑versa.
• This immutability is basis for reliable error propagation.

三、Promise 基础用法

. 创建 Promise

new Promise 是构造函数，需要传入一个执行器函数

const p = new Promise => {
// 异步逻辑写在这里
});

执行器函数的两个主要参数：

• resolve: 调用后状态变为 fulfilled,并向外传递成功结果。
• reject: 调用后状态变为 rejected,并向外传递失败原因。

# 痛点案例#：想同步获取异步结果却得不到？按理说，使用 resolve/reject 把结果“推送”出来。

const p = new Promise => {
setTimeout => {
// 模拟成功
resolve;// 如需模拟失败，只需要改成：
// reject;},1000)，});

. 获取结果：.n/.catch

PROMISE 本身不直接返回值，需要通过链式方法获取：

p
.n(res => {
console.log;})
.catch(err => {
console.log;})，

• .n: 对应 resolve
• .catch: 对应 .reject
• # 痛点#：不想每一步都写 .catch?后面会讲统一错误捕获方案。

四、Promise 主要能力：链式调用

. 链式调用原理

• 每个 .n/.catch/.finally都会.
• 下一个 .n接收上一个返回值或抛出的错误.
• 可以无限链式书写，让业务流程线性化.

. 链式调用示例

 new Promise => { setTimeout => { console . log;resolve，},500 );} )
. n，return new Promise => { console . log;resolve，},500 );} )，} )
. n;console . log;} )，

. 简写：返回普通值也能继续链式

在.n里直接 return 普通值，会自动包装为

 Promise . resolve
. n => { return '普通值';} )
. n，// 输出 普通值 } );

五、Promise 错误捕获机制

. 两种捕获方式

再看方式一。n 的第二个参数

只能捕获当前 Promise 的错误，无法覆盖整条链：

 new Promise => { reject;} )
. n (
res => { /* 成功 */ },err => { console . log;}
)，

方式二的观点是，统一 catch

可捕获整条链任意位置抛出的错误：

 new Promise => { reject;} )
. n
. catch;} )，

错误捕获特点

• 任意环节报错会
• catch 执行完仍可继续链式调用 n，实现“错误恢复”。
• 可捕获的来源包括：
  • reject 调用；
  • throw new Error；
  • n/catch 内部代码异常。

六、Promise 常用静态方法

. Promise.resolve

快速创建一个**已成功**的 Promise：

 Promise . resolve
. n );

. Promise.reject

 Promise . reject
. catch );

. Promise.all

接受一个 Promise 数组，**全部成功才成功**；任意一次失败则整体立即失败：

• 成功返回顺序对应的结果数组。
• 失败返回第一个被拒绝的原因。

 const p1 = new Promise=>r,100));const p2 = new Promise=>r,200));Promise.all
.n)
.catch);

“赛跑”机制——谁先完成，就把该结果作为整个 race 的返回。常用于接口超时控制，

从示例来看，超时控制

 const fetchData = fetch;// 假设返回 promise
const timeout = new Promise=>setTimeout=>reject,3000));Promise.race
.n)
.catch);

Promise.allSettled

等待所有 promise 完成。无论成功还是失败，都返回包含每个实例{status,value/reason}的数组。适合批量请求场景，

Promise.any

只要有 **任意一个 promise 成功** 就立即 resolved；全部都 rejected 时才会抛出 AggregateError。说起来，对“只要拿到一个可用数据即可”的场景非常友好。

七、finally 与微任务机制

. finally 用法

无论是 resolved 还是 rejected。`.finally` 中的逻辑大概率会执行，可用于关闭 loading 状态或资源清理。

 new Promise=>resolve)
.n=>{/* ... */})
.catch=>{/* ... */})
.finally=>{ console.log;})，

. 微任务与宏任务         # 痛点 #  Synchronous → Microtasks → Macrotasks​​​​​​​​​​​​​​​​​​​​ ​​​ ​ ​​​ ​​​ ​ ​ ​​​​​​​​​​​​​​​​​​​​​​​​​ Synchronous Task Microtask Queue Macrotask Queue

• 微任务: Promise.n/catch/finallyqueueMicrotaskasync/await 中的 continuation。
• 宏任务: setTimeout/setInterval/fetch 等。

再看经典面试题，javascript console.log;setTimeout => console.log,0);Promise.resolve.n => console.log);console.log，输出顺序为 **A → D → C → B**。

中断链

如果在 .n 中返回一个 永远 pending 的 promise。则后面的 .n 永远不会被触发，用于手动中止某些流程。

javascript someAsync .n=>new Promise=>{})) // 永久 pending .n=>console.log);

---

八、async/await：Promise 的终极语法糖

基础规则

• async 标记函数，使其自动返回一个 promise。按理说，
• await 必须紧跟在 promise 或 nable 前面会暂停当前 async 函数直至该 promise 决议。
• await 本身不会阻塞主线程，只是把后续代码放入微任务队列。

基础示例

javascript // 封装返回 promise 的延迟函数 function delay{ return new Promise=>resolve,time));}

// async/await 调用 async function demo{ console.log;const msg = await delay;// 暂停1秒 console.log;// 延迟1000ms完成 console.log;} demo，

async 函数的返回值

返回方式	实际表现
return value	自动包装为 Promise.resolve
throw error	自动包装为 Promise.reject

错误处理

推荐使用 try…catch 包裹所有 await 调用，实现统一捕获：

javascript async function fetchData{ try{ const res = await fetch;话说回来，const json = await res.json;老实说，return json;}catch{ console.error;// 可选择重新抛出让外层 catch 捕获 throw err;} }

并行调整

如果多个 async 操作之间互不依赖，应使用 Promise.all 并行化。提高性能：

javascript async function parallel{ const = await Promise.all();// 同时得到三个结果，可继续处理... }

---

Promise 是前端异步编程的基石。从根本解决 回调地狱 、实现 链式调用 与 统一错误处理，再配合 async/await 成为现代 JavaScript 开发少不了的工具。掌握这篇文章全部知识点，你将能够：

• 编写结构清晰、高度可维护的异步代码；
• 在面试中自信回答所有高频考点；
• 熟练运用静态方法进行并发控制与容错；

祝你玩转异步世界 🚀!

---