Question 1（基础概念）

中文： 请你解释一下什么是 Promise？它主要解决了什么问题？

English: Can you explain what a Promise is and what problem it is designed to solve?

标准答案（中文）

Promise 是一个用于表示异步操作结果的对象，它本质是一个状态机 + 回调容器。 它代表一个未来会完成（或失败）的操作结果。

Promise 主要解决的是：

1. 回调地狱（callback hell）问题
2. 让异步代码更加清晰、可读、可维护
3. 提供统一的错误处理机制

Promise 有三种状态：

• pending（进行中）
• fulfilled（已成功）
• rejected（已失败）

一旦状态从 pending 变为 fulfilled 或 rejected，就不可再改变（状态不可逆）。

作用：Promise能够让你不用关心任务什么时候结束（因为用到Promise的地方，可能都会有异步操作），在new的时候告诉它执行什么任务，之后只需要通过 then 告诉它“之前的任务结束之后该干嘛”。

面试加分点：Promise 本质上是一个状态机，并且它的回调（then/catch）是放入微任务队列执行的。

Standard Answer (English)

A Promise is an object representing the result of an asynchronous operation, essentially a state machine + callback container. It represents the eventual completion or failure of an operation and its resulting value.

A Promise mainly solves:

1. The problem of callback hell
2. Makes asynchronous code more readable and maintainable
3. Provides a unified error handling mechanism

A Promise has three states:

• pending
• fulfilled
• rejected

Once the state changes from pending to fulfilled or rejected, it becomes immutable (cannot be changed again).

面试加分点：A Promise is essentially a state machine, and its callbacks (then/catch) are executed in the microtask queue.

Question 2（基础 + 原理）

中文： Promise 的 then 方法返回的是什么？为什么可以链式调用？

English: What does the then method return, and why can Promises be chained?

标准答案（中文）

then 方法一定会返回一个新的 Promise 对象。

之所以可以链式调用，是因为：

• 每次调用 then 都会返回一个新的 Promise
• 下一个 then 会接收上一个 Promise 的结果
• 返回值会被自动“包装”成 Promise（Promise resolution 过程）

具体规则：

1. 如果 then 里返回的是一个普通值： → 会被包装成 Promise.resolve(value)
2. 如果返回的是一个 Promise： → 下一个 then 会等待这个 Promise 结果
3. 如果抛出错误： → 会变成 Promise.reject(error)，进入 catch

面试加分点：

then 的链式调用本质是“值的穿透 + Promise 的扁平化（flattening）”。

Standard Answer (English)

The then method always returns a new Promise.

Chaining works because:

• Each then call returns a new Promise
• The next then receives the result of the previous one
• The return value is automatically resolved (Promise resolution process)

Rules:

1. If a normal value is returned: → It becomes Promise.resolve(value)
2. If a Promise is returned: → The next then waits for it
3. If an error is thrown: → It becomes Promise.reject(error) and goes to catch

面试加分点：

Promise chaining is essentially value propagation + Promise flattening.

举个面试常用例子

xxxxxxxxxx
11
1
Promise.resolve(1)
2
  .then(res => res + 1)
3
  .then(res => {
4
    return Promise.resolve(res + 1);
5
  })
6
  .then(res => {
7
    throw new Error("error");
8
  })
9
  .catch(err => {
10
    console.log(err);
11
  });

你可以这样解释：

中文：

• 第一个 then 返回 2
• 第二个 then 返回 Promise(3)
• 第三个 then 抛错 → 进入 catch

English:

• First then returns 2
• Second then returns Promise(3)
• Third then throws error → goes to catch

Question 3（进阶 / 高频）

中文： then 的两个参数（onFulfilled, onRejected）和 catch 有什么区别？为什么通常不推荐在 then 里写第二个参数？

English: What is the difference between the two arguments of then (onFulfilled, onRejected) and catch? Why is it usually not recommended to use the second argument of then?

参考：https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises#catching_errors

分析：

xxxxxxxxxx
16
1
// 示例1：then 的第二个参数无法捕获前面 onFulfilled 的错误
2
Promise.resolve()
3
  .then(() => {
4
    throw new Error('在成功回调里出错啦');   // ← 这里抛错
5
  }, (err) => {
6
    console.log('onRejected:', err);   // ← 不会执行！
7
  });
8
​
9
// 示例2：catch 可以捕获
10
Promise.resolve()
11
  .then(() => {
12
    throw new Error('在成功回调里出错啦');
13
  })
14
  .catch((err) => {
15
    console.log('catch 捕获到:', err);   // ← 可以捕获
16
  });

推荐写法：

xxxxxxxxxx
11
1
// 推荐：分离成功和失败，代码更清晰
2
promise
3
  .then((value) => {
4
    // 成功处理
5
  })
6
  .catch((err) => {
7
    // 失败处理
8
  })
9
  .finally(() => {
10
    // 无论成功失败都执行
11
  });

中文回答： then 的两个参数（onFulfilled, onRejected）和 catch 有什么区别？

then(onFulfilled, onRejected) 和 .catch(onRejected) 功能相关，但有重要区别：

• then(onFulfilled, onRejected) 是为当前 Promise 同时注册成功和失败回调。
• .catch(onRejected) 实际上是 .then(undefined, onRejected) 的语法糖，它能捕获前面整条 Promise 链中产生的错误。

最关键的区别在于错误捕获范围：

• then 的第二个参数（onRejected）无法捕获它自己 onFulfilled 回调中抛出的错误。
• .catch() 可以捕获链条上前面任何 .then() 中抛出的错误，更安全，也更常用。

推荐写法： 成功用 .then()，错误统一用 .catch()，代码更清晰，可读性更好。

中文回答：为什么不推荐用 then 的第二个参数？

不推荐使用 then 的第二个参数，因为它：

1. 不能捕获 then 内部抛出的错误
2. 会导致错误处理逻辑分散
3. 不符合链式错误处理的设计（error bubbling）

推荐统一使用 catch 来处理错误，使代码更清晰、可维护。

面试加分： Promise 的错误是“冒泡”的，应该在链的末尾统一用 catch 处理。

Standard Answer (English)

then(onFulfilled, onRejected) and .catch(onRejected) are related but have key differences:

• .then(onFulfilled, onRejected) registers both fulfillment and rejection handlers for the current promise only.
• .catch(onRejected) is actually syntactic sugar for .then(undefined, onRejected). It handles rejection from the entire promise chain before it.

The most important difference is error handling scope:

• The rejection handler in .then() cannot catch errors thrown inside its own onFulfilled handler.
• .catch() can catch errors from any previous .then() in the chain, making it much safer and more commonly used.

Best practice: Use .then() only for success, and chain .catch() for error handling. It improves readability and reduces bugs.

Why not use the second argument of then?

English:

It is not recommended because:

1. It cannot catch errors thrown inside then
2. It leads to scattered error handling
3. It breaks the error propagation chain

Using catch provides a more consistent and maintainable error handling pattern.

面试加分：

Errors in Promises bubble down the chain and should be handled at the end using catch.

Question 4（重要）

中文： 如果在 then 里不写 return，会发生什么？值是怎么传递的？

English: What happens if you don’t return anything inside a then? How is the value propagated?

标准答案（中文）

如果在 then 里面不写 return，那么：

👉 默认会返回 undefined 👉 等价于：return undefined

并且这个 undefined 会被自动包装成：

xxxxxxxxxx
1
1
Promise.resolve(undefined)

然后传递给下一个 then

面试加分：

then 的返回值决定了下一个 then 的输入，如果不写 return，默认就是 undefined。

Standard Answer (English)

If you don’t return anything inside a then:

👉 It implicitly returns undefined 👉 Equivalent to: return undefined

This undefined is wrapped as:

xxxxxxxxxx
1
1
Promise.resolve(undefined)

and passed to the next then.

面试加分：

The return value of then determines the input of the next then. If omitted, it defaults to undefined.

几个例子，看返回值是什么？

例子1：

xxxxxxxxxx
7
1
Promise.resolve(1)
2
  .then(res => {
3
    console.log(res); // 1
4
  })
5
  .then(res => {
6
    console.log(res); // ?
7
  });

输出是什么？

xxxxxxxxxx
2
1
1
2
undefined

为什么？

中文：

• 第一个 then 没有 return
• 默认返回 undefined
• 第二个 then 接收到的就是 undefined

English:

• The first then does not return anything
• It implicitly returns undefined
• The next then receives undefined

例子2：

xxxxxxxxxx
1
1
.then(() => 123)

等价于：

xxxxxxxxxx
3
1
.then(() => {
2
  return 123;
3
})

返回了123

例子3：

xxxxxxxxxx
3
1
.then(() => {
2
  Promise.resolve(123);
3
})

⚠️ 注意！！！

这里没有 return，所以下一个 then 仍然拿到 undefined。

Question 5（核心机制）

中文： Promise.resolve() 和 new Promise(resolve => resolve()) 有什么区别？

English: What is the difference between Promise.resolve() and new Promise(resolve => resolve())?

这一题已经进入Promise + 事件循环（event loop）核心考点了。

标准答案（中文）

Promise.resolve() 和 new Promise(resolve => resolve()) 都会返回一个已解决（fulfilled）的 Promise，但它们在执行时机和行为细节上是有区别的。

执行时机：

• new Promise 里的函数是同步执行的
• Promise.resolve() 是直接创建一个已完成的 Promise

行为细节：

Promise.resolve 会自动“展开”（flatten）Promise

Standard Answer (English)

Both Promise.resolve() and new Promise(resolve => resolve()) return a fulfilled Promise, but they differ in execution timing and behavior details.

execution timing:

• The function inside new Promise runs synchronously
• Promise.resolve() directly creates a resolved Promise

behavior details:

Promise.resolve will unwrap nested Promises (flattening)

分析：

1、执行时机：

xxxxxxxxxx
10
1
console.log("start");
2
​
3
new Promise(resolve => {
4
  console.log("new Promise");
5
  resolve();
6
}).then(() => {
7
  console.log("then");
8
});
9
​
10
console.log("end");

输出顺序：

xxxxxxxxxx
4
1
start
2
new Promise
3
end
4
then

为什么？

中文解释：

执行顺序：

1. 同步代码先执行 → start
2. 执行 new Promise → 重点：因为里面是同步 → 所以打印 new Promise
3. resolve 后，把 then 放入微任务队列
4. 执行 end
5. 最后执行微任务 → then

English explanation:

1. Run sync code → start
2. Execute new Promise → executor runs immediately → new Promise
3. then callback goes to microtask queue
4. Run end
5. Run microtask → then

2、行为细节

xxxxxxxxxx
2
1
Promise.resolve(Promise.resolve(1))
2
  .then(res => console.log(res));

输出：1

Question 6（事件循环 / 高频）

中文： 下面代码的输出顺序是什么？请解释原因。

English: What is the output order of the following code? Explain why.

xxxxxxxxxx
11
1
console.log("1");
2
​
3
setTimeout(() => {
4
  console.log("2");
5
}, 0);
6
​
7
Promise.resolve().then(() => {
8
  console.log("3");
9
});
10
​
11
console.log("4");

我的答案是：1，3，4，2。因为我知道setTimeout绝对是延时执行的，即使延迟时间是0。但是最终答案是1，4，3，2。

分析：

xxxxxxxxxx
1
1
console.log("1");

👉 同步代码，直接执行 输出：1

xxxxxxxxxx
3
1
setTimeout(() => {
2
  console.log("2");
3
}, 0);

👉 宏任务（macrotask），放入任务队列（task queue） （不会立刻执行）

xxxxxxxxxx
3
1
Promise.resolve().then(() => {
2
  console.log("3");
3
});

👉 微任务（microtask），放入微任务队列（microtask queue）

xxxxxxxxxx
1
1
console.log("4");

👉 同步代码，直接执行 输出：4

到这里为止（同步执行结束）

当前输出：

xxxxxxxxxx
2
1
1
2
4

接下来执行队列

规则（面试必背）：

中文： 每一轮事件循环： 👉 先清空所有微任务 👉 再执行一个宏任务

执行微任务：

输出：

xxxxxxxxxx
1
1
3

再执行宏任务（setTimeout）：

输出：

xxxxxxxxxx
1
1
2

最终结果

xxxxxxxxxx
4
1
1
2
4
3
3
4
2

英文 Explanation:

1. Synchronous code runs first:

   • 1
   • 4

2. Then microtasks:

   • 3 (from Promise)

3. Then macrotasks:

   • 2 (from setTimeout)

Promise 的 then 属于微任务，会在当前同步代码执行完之后、下一个宏任务之前执行。

Promise callbacks (then) are microtasks, executed after synchronous code but before macrotasks.

Key Rule:

Microtasks always run before macrotasks

Question 7（执行顺序 / 进阶）

中文： 下面代码输出什么？

English: What is the output?

xxxxxxxxxx
15
1
console.log("start");
2
​
3
setTimeout(() => {
4
  console.log("timeout");
5
}, 0);
6
​
7
Promise.resolve()
8
  .then(() => {
9
    console.log("promise1");
10
  })
11
  .then(() => {
12
    console.log("promise2");
13
  });
14
​
15
console.log("end");

我的答案：start, end, promise1, promise2, timeout。回答正确。

分析：

1、第一阶段：同步代码

xxxxxxxxxx
1
1
console.log("start");

输出：

xxxxxxxxxx
1
1
start

xxxxxxxxxx
3
1
setTimeout(() => {
2
  console.log("timeout");
3
}, 0);

👉 宏任务，进入 task queue（暂不执行）

xxxxxxxxxx
7
1
Promise.resolve()
2
  .then(() => {
3
    console.log("promise1");
4
  })
5
  .then(() => {
6
    console.log("promise2");
7
  });

👉 这里很关键：

• 第一个 then → 放入微任务队列
• 第二个 then → 不会立即进入队列

⚠️ 为什么？ 因为第二个 then 要等第一个执行完才会加入队列

xxxxxxxxxx
1
1
console.log("end");

输出：

xxxxxxxxxx
1
1
end

2、第二阶段：执行微任务

当前微任务队列：

xxxxxxxxxx
1
1
promise1

执行：

xxxxxxxxxx
1
1
promise1

👉 执行完后：

• 第二个 then 才被加入微任务队列

继续执行微任务：

xxxxxxxxxx
1
1
promise2

3、第三阶段：执行宏任务

xxxxxxxxxx
1
1
timeout

核心考点

关键点 1

then 是“链式微任务”

中文： 后一个 then 要等前一个执行完才会进入微任务队列

English: Each then in a chain is scheduled only after the previous one resolves

关键点 2

微任务队列是“清空执行”的

中文： 一旦开始执行微任务，会一直执行直到队列清空

English: The microtask queue is fully drained before moving to macrotasks

面试加分句：

中文： Promise 的 then 是按链式依赖逐个进入微任务队列，而不是一次性全部进入。

English: Promise then callbacks are queued sequentially based on resolution, not all at once.

Question 8（执行顺序 / 困难）

中文： 下面代码输出什么？

English: What is the output?

xxxxxxxxxx
13
1
Promise.resolve()
2
  .then(() => {
3
    console.log("A");
4
    return Promise.resolve("B");
5
  })
6
  .then(res => {
7
    console.log(res);
8
  });
9
​
10
Promise.resolve()
11
  .then(() => {
12
    console.log("C");
13
  });

我的答案：A, B ,C。正确答案是A, C, B。

关键点是：多个 Promise 链之间的微任务是“交替执行”的，不是一个链跑完再跑另一个。

分析：

第一步：同步阶段

所有 Promise 创建完成

第二步：初始化微任务队列

此时微任务队列是：

xxxxxxxxxx
2
1
then1(A)
2
thenC

第三步：执行第一个微任务（A）

xxxxxxxxxx
2
1
console.log("A");
2
return Promise.resolve("B");

输出：

xxxxxxxxxx
1
1
A

⚠️ 关键点来了！！！

这里返回了：

xxxxxxxxxx
1
1
Promise.resolve("B")

👉 所以：

• 当前这个 then 不会立刻把 B 传给下一个 then
• 它会等待这个 Promise resolve
• 然后再把“打印 B”这个任务加入微任务队列

此时队列变成：

xxxxxxxxxx
2
1
thenC
2
then(B)

第四步：执行 thenC

xxxxxxxxxx
1
1
console.log("C");

输出：

xxxxxxxxxx
1
1
C

第五步：执行 then(B)

xxxxxxxxxx
1
1
console.log("B");

输出：

xxxxxxxxxx
1
1
B

Key idea:

Microtasks from different Promise chains are interleaved, not executed chain-by-chain.

中文： 当 then 返回一个 Promise 时，后续 then 会被“延迟”，让其他微任务有机会先执行。

English: When a then returns a Promise, the next then is deferred, allowing other microtasks to run first.

Question 9（执行顺序 / 难 / 综合）

中文： 下面代码输出什么？

English: What is the output?

xxxxxxxxxx
19
1
console.log("start");
2
​
3
setTimeout(() => {
4
  console.log("timeout1");
5
​
6
  Promise.resolve().then(() => {
7
    console.log("promise1");
8
  });
9
}, 0);
10
​
11
Promise.resolve().then(() => {
12
  console.log("promise2");
13
​
14
  setTimeout(() => {
15
    console.log("timeout2");
16
  }, 0);
17
});
18
​
19
console.log("end");

我的答案：start, end, promise2, timeout1, promise1, timeout2。回答正确。

分析，这题涉及：

• 宏任务嵌套
• 微任务嵌套
• 执行轮次（tick）

1、第一轮（主线程 / 主宏任务）

执行同步代码：

xxxxxxxxxx
4
1
console.log("start"); // start
2
setTimeout(...) // timeout1 → 宏任务队列
3
Promise.resolve().then(...) // promise2 → 微任务队列
4
console.log("end"); // end

当前输出：

xxxxxxxxxx
2
1
start
2
end

当前队列状态：

• 微任务队列：promise2
• 宏任务队列：timeout1

清空微任务队列

执行：

xxxxxxxxxx
1
1
console.log("promise2");

输出：

xxxxxxxxxx
1
1
promise2

同时执行：

xxxxxxxxxx
3
1
setTimeout(() => {
2
  console.log("timeout2");
3
}, 0);

👉 加入宏任务队列

此时队列：

• 宏任务：timeout1, timeout2

2、第二轮（执行宏任务 timeout1）

xxxxxxxxxx
1
1
console.log("timeout1");

输出：

xxxxxxxxxx
1
1
timeout1

timeout1 内部：

xxxxxxxxxx
3
1
Promise.resolve().then(() => {
2
  console.log("promise1");
3
});

👉 加入微任务队列

清空微任务队列

执行：

xxxxxxxxxx
1
1
promise1

3、第三轮（执行宏任务 timeout2）

xxxxxxxxxx
1
1
timeout2

Key points:

1. 微任务优先级高于宏任务

Microtasks run before macrotasks

2. 每一轮宏任务执行完都会清空微任务

Each macrotask is followed by draining all microtasks

3. 宏任务是按顺序进入队列的（FIFO）

Macrotasks are queued in order

中文： 事件循环是按“宏任务 → 清空微任务 → 下一个宏任务”的顺序执行的，微任务可以在执行过程中不断插入。

English: The event loop runs as: macrotask → drain microtasks → next macrotask. Microtasks can be dynamically added during execution.

Question 10（本质）

中文： async/await 和 Promise 的关系是什么？本质上是怎么实现的？

English: What is the relationship between async/await and Promise? How does it work under the hood?

我的回答：async/await 是 promise的语法糖，async/await可以使用同步的方式来写异步代码。怎么实现不知道。

下面看答案：

标准答案（中文）

async/await 本质上是 Promise 的语法糖，它让我们可以用同步的写法来表达异步逻辑。

在底层实现上：

1. async 函数一定返回一个 Promise
2. await 会把后面的表达式转成 Promise（相当于 Promise.resolve()）
3. await 会暂停函数执行，把后面的代码放入微任务队列
4. 等 Promise resolve 后，再恢复执行（类似 .then）

Standard Answer (English)

async/await is essentially syntactic sugar over Promises, allowing asynchronous code to be written in a synchronous style.

Under the hood:

1. An async function always returns a Promise
2. await converts the expression into a Promise (like Promise.resolve())
3. await pauses execution and schedules the rest as a microtask
4. Once resolved, execution resumes (similar to .then)

简化的答案：

中文：

async/await 是 Promise 的语法糖，async 函数返回 Promise，await 会把表达式转为 Promise 并暂停执行，把后续代码放入微任务队列，本质上等价于 Promise.then 的链式调用。

English:

Async/await is syntactic sugar over Promises. Async functions return Promises, and await converts expressions into Promises and resumes execution via microtasks, essentially behaving like chained .then calls.

分析：

async/await 写法：

xxxxxxxxxx
4
1
async function test() {
2
  const res = await Promise.resolve(1);
3
  console.log(res);
4
}

本质等价于：

xxxxxxxxxx
5
1
function test() {
2
  return Promise.resolve(1).then(res => {
3
    console.log(res);
4
  });
5
}

深度解析：

await 做了什么？

xxxxxxxxxx
1
1
await xxx

本质可以理解为：

xxxxxxxxxx
3
1
Promise.resolve(xxx).then(result => {
2
  // 后面的代码
3
});

关键机制（非常重要）

为什么说它“暂停”？

中文：

• 不是阻塞线程
• 是把后面的代码拆成一个 then 回调（微任务）
• 当前函数“让出执行权”

English:

• It does NOT block the thread
• It splits the remaining code into a .then (microtask)
• Execution is resumed later

常见追问：

Q：await 后面如果不是 Promise 会怎样？

xxxxxxxxxx
1
1
await 123

👉 等价于：

xxxxxxxxxx
1
1
await Promise.resolve(123)

Q：async 函数 return 什么？

xxxxxxxxxx
3
1
async function test() {
2
  return 1;
3
}

👉 实际返回：

xxxxxxxxxx
1
1
Promise.resolve(1)

Question 11（Promise.all）

中文： 请你实现一个 Promise.all，并说明它的行为。

English: Implement Promise.all and explain how it works.

常见题目要求（面试官常说的话）：

xxxxxxxxxx
1
1
Promise.myAll([p1, p2, p3])

需要满足：

1. 所有 Promise 成功 → 返回结果数组（按顺序）
2. 有一个失败 → 立即 reject
3. 支持普通值（不是 Promise）
4. 结果顺序必须和输入一致（重点）

分析：

• 所有 Promise 成功 → 返回结果数组（按顺序） 使用计数器 completed，每完成一个就 +1。当 completed === len 时，调用 resolve(results) 返回最终数组。
• 有一个失败 → 立即 reject 每个子 Promise 的 .catch() 直接调用外层的 reject(err)。只要有一个失败，整个 myPromiseAll 立即失败，不等待其他 Promise。
• 支持普通值（不是 Promise） 对每一项都使用 Promise.resolve(item) 包装。如果是普通值，会立即变成已 resolved 的 Promise。
• 结果顺序必须和输入一致（最重点） 提前创建 results = new Array(len)，并严格按照 results[index] = value 存放结果。即使 Promise 完成的先后顺序不同，最终数组顺序依然和输入数组完全一致。

英文版：

• All Promises succeed → return result array (in order) We use a counter completed. When completed === len, we call resolve(results).
• One fails → immediately reject Each promise’s .catch() directly calls reject(err). As soon as any one rejects, the whole myPromiseAll rejects immediately.
• Support ordinary values (not Promise) We wrap every item with Promise.resolve(item). If it's a normal value, it becomes a resolved promise instantly.
• Result order must match input order (Most Important) We pre-allocate results = new Array(len) and store each result at results[index]. Even if promises complete in random order, the final array maintains the original sequence.

简单回答：

“手写 Promise.all 的核心难点有两个：一是用计数器判断所有完成，二是必须按索引存放结果来保证顺序。我会用 Promise.resolve() 来兼容普通值，同时任何一个 reject 都会立刻终止。”

The core idea of Promise.all:

1. Use an array to store results in order
2. Use a counter to track completion
3. Use Promise.resolve to normalize inputs
4. Resolve when all succeed
5. Reject immediately on any failure
6. Handle empty array case

代码：

xxxxxxxxxx
33
1
Promise.myAll = function(promises) {
2
  return new Promise((resolve, reject) => {
3
    // 1. Input validation
4
    if(!Array.isArray(promises) ) {
5
      return reject(new TypeError("Arguments must be an array"))
6
    }
7
​
8
    const len = promises.length;
9
    const results = new Array(len); // pre-allocate to keep order
10
    let completed = 0;
11
​
12
    // 这里是重点，如果数组为空，没有加上这句的话，就永远不会resolve
13
    if(len === 0) {
14
      return resolve([])
15
    }
16
​
17
    promises.forEach((promise, index) => {
18
      // 3、support ordinary values → use Promise.resolve()
19
      Promise.resolve(promise).then(value => {
20
        results[index] = value; // 4、keep original order by using index
21
        completed++;
22
​
23
        // all succeeded → resolve with results array
24
        if(completed === promises.length) {
25
          resolve(results)
26
        }
27
      }).catch(err => {
28
        // if anyone fails → immediately reject
29
        reject(err)
30
      })
31
    })
32
  })
33
}

Question 12（Promise.race）

中文

请你实现一个 Promise.race

English

Implement Promise.race

题目要求：

xxxxxxxxxx
1
1
Promise.myRace([p1, p2, p3])

需要满足：

1. 谁先完成（resolve 或 reject）就返回谁
2. 不关心顺序
3. 只要有一个 settle（成功或失败），就结束
4. 支持普通值（非 Promise）
5. 空数组 → 永远 pending（⚠️ 很多人不知道）

举个例子

xxxxxxxxxx
4
1
Promise.race([
2
  new Promise(res => setTimeout(() => res(1), 100)),
3
  new Promise(res => setTimeout(() => res(2), 50))
4
]).then(console.log)

👉 输出：2

分析：

race：赛跑、比赛。那么这个方法的意思就是，谁先完成，就返回谁。

那么参考Promise.all的实现方法，这个其实更简单，因为只需要返回一个settle结果，并且不关心顺序，空数组永远pending（意味着不需要考虑空数组返回什么，因为此时的promise.forEach是无法执行的，外层的promise就会一直pending），直接在then里面resolve并且catch里面reject即可。

中文

Promise.race 的核心是：

1. 遍历所有输入
2. 用 Promise.resolve 统一处理
3. 谁先 resolve 或 reject，就立即结束
4. 不需要计数或顺序控制
5. 空数组会返回一个 pending Promise

English

The core idea of Promise.race:

1. Iterate through all inputs
2. Normalize using Promise.resolve
3. Resolve or reject as soon as one settles
4. No need for ordering or counting
5. Empty array results in a pending Promise

我的答案：

xxxxxxxxxx
13
1
Promise.myRace = function(promises) {
2
  return new Promise((resolve, reject) => {
3
    if(!Array.isArray(promises)) {
4
      return reject(new TypeError("Arguments must be an array"))
5
    }
6
​
7
    promises.forEach((promise, _) => {
8
      Promise.resolve(promise).then(value => {
9
        resolve(value)
10
      }).catch(reject)
11
    })
12
  })
13
}

可以优化的点：

⚠️ 点 1：空数组情况（高频考点）

xxxxxxxxxx
1
1
Promise.race([])

正确行为：永远 pending（不会 resolve / reject）。我的答案是正确的，但是需要主动进行说明让面试官了解。

中文： 如果传入空数组，race 会返回一个永远 pending 的 Promise。因为promises.forEach不会执行。

English: If an empty array is passed, the returned Promise will remain pending forever.

⚠️ 点 2：可以简化写法（加分）

你现在写的是：

xxxxxxxxxx
2
1
.then(value => resolve(value))
2
.catch(reject)

面试中可以写成更简洁：

xxxxxxxxxx
1
1
.then(resolve, reject)

⚠️ 点 3：变量命名（小优化）

xxxxxxxxxx
1
1
(promises, _)

_ 没必要，可以去掉

所以最终答案可以是这样的：

xxxxxxxxxx
11
1
Promise.myRace = function(promises) {
2
  return new Promise((resolve, reject) => {
3
    if (!Array.isArray(promises)) {
4
      return reject(new TypeError("Arguments must be an array"));
5
    }
6
​
7
    promises.forEach(promise => {
8
      Promise.resolve(promise).then(resolve, reject);
9
    });
10
  });
11
};

Question 13 (用Promise封装一个超时功能)

中文解释： 给任意一个 Promise 添加超时时间，如果超过指定时间还未完成，则 reject。

English Explanation: Add a timeout to any promise. If it doesn't settle within the given time, reject with a timeout error.

xxxxxxxxxx
15
1
function withTimeout(promise, ms) {
2
  const timeout = new Promise((resolve, reject) = >{
3
    setTimeout(() => {
4
      reject(new Error(`Promise 超时：${ms}ms`))
5
    }, ms)
6
  })
7
​
8
  return Promise.race([promise, timeout])
9
}
10
​
11
// 使用
12
async function fetchData() {
13
  const data = await withTimeout(fetch('/api/data'), 5000)
14
  return data;
15
}

面试回答模板：

“我常用 Promise.race() 来实现超时功能。一个是正常 Promise，另一个是 setTimeout 的 reject Promise，哪个先完成就用哪个。这样可以有效防止接口长时间无响应。”

Question 14 (用Promise封装一个并发限制函数)

中文解释： 实现一个函数，限制同时运行的异步任务数量（例如最多同时 3 个请求），常用于防止请求过多导致服务器压力过大，避免瞬间撑爆服务器或浏览器带宽。。比如说用户上传图片、文件的时候，可以同时选中很多个文件一起上传，此时使用并发限制函数是很有效的。

English Explanation: Create a function that limits the maximum number of concurrent async tasks (e.g. max 3 requests at the same time).

xxxxxxxxxx
28
1
async function limitConcurrency(tasks, limit = 3) {
2
  const results = [];     // 存储所有任务的 Promise
3
  const executing = [];   // 存储正在执行的任务池
4
​
5
  for (const task of tasks) {
6
    // 1. 将任务包装成 Promise，并立即开始执行
7
    const p = Promise.resolve().then(() => task());
8
    results.push(p);
9
​
10
    // 2. 将正在执行的任务加入池子
11
    executing.push(p);
12
​
13
    // 3. 关键：任务完成后，自动从池子中移除自己
14
    // 无论成功或失败 (finally)，都要腾出位置
15
    p.finally(() => {
16
      const index = executing.indexOf(p);
17
      if (index > -1) executing.splice(index, 1);
18
    });
19
​
20
    // 4. 如果池子满了，就等待“最快的一个”任务完成，腾出空位
21
    if (executing.length >= limit) {
22
      await Promise.race(executing);
23
    }
24
  }
25
​
26
  // 5. 当所有任务都发起了，最后等待全部任务的结果
27
  return Promise.all(results);
28
}

为什么要使用Promise.resolve().then(() => task())，这种写法。不能使用new Promise这种写法吗？

 

这两种写法在功能上其实都能达到目的，但使用 Promise.resolve().then(() => task()) 是一种更稳健、简洁的工业级写法。

以下是它们的三大核心区别：

1. 自动处理“非 Promise”返回值

在你的 tasks 数组里，用户可能不小心传了一个普通函数（不返回 Promise 的函数）。

• 使用 Promise.resolve().then(...)：它会自动将 task() 的返回值包裹成 Promise。即使 task 只是 () => 123，后续的 p.finally 也能正常工作。
• 使用 new Promise：你需要手动在里面写 resolve(task())。

2. 异常捕获更优雅

这是最关键的原因。

• Promise.resolve().then(() => task())：如果 task() 函数在执行瞬间报错（同步异常），这个错误会被 .then 自动捕获并转化为一个 rejected 状态的 Promise。

• new Promise

  xxxxxxxxxx
  9
  1
  // 如果这样写，如果 task() 执行时报错，由于它在 executor 同步代码里
  2
  // 你必须手动写 try...catch 才能捕获
  3
  const p = new Promise((resolve, reject) => {
  4
     try {
  5
       resolve(task());
  6
     } catch(e) {
  7
       reject(e);
  8
     }
  9
  });
  

  而

  xxxxxxxxxx
  1
  1
  Promise.resolve().then
  

  帮你把这些繁琐的

  xxxxxxxxxx
  1
  1
  try...catch
  

  都省掉了。

3. 语义更清晰

• new Promise 通常用于封装一个原本不是 Promise 的东西（比如 setTimeout）。
• Promise.resolve().then 通常用于启动一个已有的异步逻辑，或者将一系列逻辑链条化。在调度器（Limit Concurrency）场景下，我们是在“启动”任务，而不是在“封装”底层 API，所以这种写法更符合语义。

---

如果你非要用 new Promise，它长这样：

为了达到同样的效果，你需要写得更复杂：

xxxxxxxxxx
10
1
const p = new Promise((resolve, reject) => {
2
  // 需要手动立即执行 task
3
  try {
4
    const result = task();
5
    // 还需要手动判断 result 是不是 Promise 并处理
6
    Promise.resolve(result).then(resolve, reject);
7
  } catch (e) {
8
    reject(e);
9
  }
10
});

总结

使用 Promise.resolve().then(() => task()) 是一种 “懒人写法”，它利用了 Promise 的内部机制自动处理了：

1. 同步错误捕获。
2. 返回值 Promise 化。

为什么我很少自己创建promise呢？比如说我在nextjs项目中，写prisma数据库操作，我会直接使用async await，其余的地方也很少自己创建promise，是不是我能力不够

可以这样说，但这是工作造成的，如果工作中会用到promise，我想我会很快掌握的。

但是面试中对于promise的考察还是很有深度啊，我该怎么办？我主要是做项目，做工具、做框架都很少

掌握好这些面试题，掌握经典的promise用法即可。

promise里面如果嵌套promise的话，还是会造成回调地狱吧？

你说得非常对！如果你在 Promise 的 .then() 里面又去 new Promise() 并且在里面嵌套写 .then()，那确实会演变成“Promise 地狱”，代码看起来和以前的回调嵌套没区别。

但 Promise 设计的精髓在于“链式调用（Chaining）”，它能把嵌套结构拍平。

1. 错误示范：Promise 嵌套（地狱再现）

这种写法虽然用了 Promise，但思维还是回调函数的思维：

xxxxxxxxxx
8
1
// ❌ 错误示范：嵌套
2
api.getUser().then(user => {
3
  api.getOrders(user.id).then(orders => {
4
    api.getOrderDetail(orders[0].id).then(detail => {
5
      console.log(detail);
6
    });
7
  });
8
});

2. 正确示范：链式调用（拍平逻辑）

Promise 规定：.then() 方法里的回调函数，如果返回的是一个新的 Promise，那么下一个 .then() 会等待这个 Promise 完成后再执行。

xxxxxxxxxx
18
1
// ✅ 正确示范：链式调用
2
api.getUser()
3
  .then(user => {
4
    // 返回一个 Promise
5
    return api.getOrders(user.id); 
6
  })
7
  .then(orders => {
8
    // 这里拿到的是上面 getOrders 的结果
9
    return api.getOrderDetail(orders[0].id);
10
  })
11
  .then(detail => {
12
    // 这里拿到的是 detail
13
    console.log(detail);
14
  })
15
  .catch(err => {
16
    // 整个链条上任何一步出错，都会在这里被捕获
17
    console.error(err);
18
  });

3. 终极方案：Async/Await（看起来像同步）

为了彻底解决这种视觉上的“链条感”，ES2017 引入了 async/await。它本质上还是 Promise，但它让异步代码写起来和同步代码一模一样：

xxxxxxxxxx
11
1
// 🚀 终极方案：Async/Await
2
async function getInfo() {
3
  try {
4
    const user = await api.getUser();
5
    const orders = await api.getOrders(user.id);
6
    const detail = await api.getOrderDetail(orders[0].id);
7
    console.log(detail);
8
  } catch (err) {
9
    console.error(err);
10
  }
11
}

总结

• Promise 嵌套：如果你手动去嵌套，确实会造成地狱。
• Promise 链式调用：利用 return 将逻辑拍平。
• Async/Await：目前最推荐的写法，完全消灭了嵌套和链条感。

我一直在写项目，promise在哪些场景里面可以应用呢？

其实我在很多地方用到了promise，比如说axios, prisma, promise.all(), fetch。使用起来我还是会的，但是我从来没有主动封装过promise相关的工具，那么可以从哪些场景提升自己应用promise的能力呢？

• 用promise封装一个超时功能。给任意一个 Promise 添加超时时间，如果超过指定时间还未完成，则 reject。
• 并发限制函数。实现一个函数，限制同时运行的异步任务数量（例如最多同时 3 个请求），常用于防止请求过多导致服务器压力过大。
• 用promise封装一个请求重试功能。如果接口失败了，自动重试 3 次才彻底报错。

当你发现你正在写的逻辑里出现了 “监听某个事件（如 onSuccess, onComplete）” 或者是 “在回调函数里套回调函数” 的时候，就是你该主动封装 Promise 的信号。