理解 Promise 链与异步依赖
在 javascript 异步编程中，promise 链是处理一系列相互依赖的异步操作的关键机制。当一个操作的结果需要作为下一个操作的输入，或者多个操作需要并发执行并在全部完成后才能进行下一步时，promise 链提供了清晰的结构。然而，构建复杂的 promise 链，尤其涉及并发与顺序混合的场景时，需要精确地管理 promise 的状态和返回值。
考虑一个典型的异步任务流，其依赖关系如下：
- 任务 A、B 和 D 可以同时开始。
- 任务 C 必须在 A 和 B 都完成后才能开始。
- 任务 E 必须在 C 和 D 都完成后才能开始。
这种场景下，如何正确地组织 Promise 链，确保每个任务都在其所有前置条件满足后才执行，并且最终的流程能够按照预期完成，是我们需要解决的核心问题。
Promise 链中的常见错误与修正
在构建复杂 Promise 链时，一个常见的错误是在 .then() 回调中启动了一个新的 Promise，但没有将其返回。这会导致外部的 Promise 链无法感知到这个新启动的 Promise，从而无法等待其完成。
以下是一个错误的示例代码，它未能正确处理任务 C 的依赖：
立即学习“Java免费学习笔记（深入）”；
function test_p(name, sec) {
console.log(Date.now() - start, 'Started ', name, " Sec: ", sec);
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(Date.now() - start, 'Resolved ', name, " Sec: ", sec);
resolve(10);
}, sec * 1000);
});
}
let start = Date.now();
let p1 = test_p("A", 2)
.then((result) => { console.log(Date.now() - start, result); return result; });
let p2 = test_p("B", 5)
.then((result) => { console.log(Date.now() - start, result); return result; });
// pp1 负责等待 A 和 B 完成，然后启动 C
let pp1 = Promise.all([p1, p2])
.then((result) => { console.log(Date.now() - start, "p1-p2 started"); return result; })
.then(() => { console.log(Date.now() - start, "p1-p2 done "); })
.then(() => {
// 错误：这里启动了 p3 (任务 C)，但没有将其返回
let p3 = test_p("C", 5)
.then((result) => { console.log(Date.now() - start, result); return result; });
// 由于没有返回 p3，外部的 pp1 不会等待 p3 完成
});
let p4 = test_p("D", 7)
.then((result) => { console.log(Date.now() - start, result); return result; });
// pp2 意图等待 pp1 (包含 C) 和 p4 (D) 完成，但由于 pp1 未等待 C，这里会提前执行
let pp2 = Promise.all([pp1, p4]) // 这里的 pp1 实际上在 C 启动后就立即解决了
.then((result) => { console.log(Date.now() - start, "pp1-p4 started"); return result; });
// 预期输出中，pp1-p4 started 会在 C 任务完成前打印，这是不正确的。在上述代码中，pp1 的最后一个 .then() 回调中，p3 = test_p("C", 5)... 确实启动了任务 C，但该回调函数并没有 return p3。这意味着 pp1 链会立即完成，而不会等待 p3（任务 C）的实际完成。因此，Promise.all([pp1, p4]) 中的 pp1 会比预期更早地解决，导致任务 E（如果存在）或后续依赖于 C 的任务过早开始。
修正方法： 确保在 .then() 回调中启动 Promise 时，将其返回，以便 Promise 链能够正确地等待该 Promise 的解决。
// 修正后的 pp1
pp1 = Promise.all([p1, p2])
.then((result) => { console.log(Date.now() - start, "p1-p2 started"); return result; })
.then(() => { console.log(Date.now() - start, "p1-p2 done "); })
.then(() => {
// 正确：返回 p3，确保 pp1 等待 p3 完成
let p3 = test_p("C", 5)
.then((result) => { console.log(Date.now() - start, result); return result; });
return p3; // 关键：返回 Promise p3
}); 通过返回 p3，pp1 现在会正确地等待任务 C 完成，然后 Promise.all([pp1, p4]) 才能继续执行。
使用 async/await 简化复杂 Promise 链
尽管通过正确使用 return 语句可以解决 Promise 链的依赖问题，但当异步流程变得非常复杂时，嵌套的 .then() 回调可能会降低代码的可读性。ES2017 引入的 async/await 语法提供了一种更简洁、更接近同步代码的写法来处理 Promise。
我们可以使用 async/await 重构上述复杂 Promise 链，使其更易于理解和维护：
const start = Date.now();
// 辅助函数，模拟异步任务并打印日志
async function delay(name, timeInSec) {
console.log(Date.now() - start, 'Started ', name, " Sec: ", timeInSec);
await new Promise((res) => setTimeout(res, timeInSec * 1000));
console.log(Date.now() - start, 'Resolved ', name, " Sec: ", timeInSec);
return name; // 返回任务名称作为标识
}
console.log("start:", start);
// 1. 启动 A, B, D (并发执行)
const A_promise = delay("A", 2);
const B_promise = delay("B", 5);
const D_promise = delay("D", 7);
// 2. C 在 A 和 B 完成后开始
// 使用 Promise.all 等待 A 和 B，然后启动 C
const C_promise = Promise.all([A_promise, B_promise]).then(() => delay("C", 5));
// 3. E 在 C 和 D 完成后开始
// 使用 Promise.all 等待 C 和 D，然后启动 E
const E_promise = Promise.all([C_promise, D_promise]).then(() => delay("E", 2));
// 如果需要等待所有任务完成，可以再加一个 Promise.all
E_promise.then(() => {
console.log(Date.now() - start, "All tasks completed!");
});在这个 async/await 风格的示例中：
- delay 函数被声明为 async，内部使用 await new Promise(...) 来模拟异步延迟。
- 任务 A、B 和 D 通过调用 delay 函数立即启动，它们返回的 Promise 被存储起来。
- Promise.all([A_promise, B_promise]).then(() => delay("C", 5)) 明确表示任务 C 依赖于 A 和 B 的完成。then 回调会在 A 和 B 都解决后才执行，此时 delay("C", 5) 被调用，并返回一个新的 Promise。
- 同样地，Promise.all([C_promise, D_promise]).then(() => delay("E", 2)) 确保任务 E 在 C 和 D 都完成后才启动。
这种方式不仅解决了依赖问题，还大大提高了代码的清晰度。每个 Promise.all 调用都清晰地定义了一组并发的依赖，而 .then() 则定义了顺序执行的步骤。
总结与最佳实践
构建复杂的 Promise 链需要对 Promise 的工作原理有深入的理解。以下是一些关键的总结和最佳实践：
- 返回 Promise： 在 .then() 回调中，如果你启动了一个新的异步操作（返回一个 Promise），务必将其 return 出来。这是确保 Promise 链能够正确等待该操作完成的关键。
- Promise.all 用于并发： 当你需要等待多个独立的 Promise 都完成后再执行下一步时，使用 Promise.all([promise1, promise2, ...]) 是最有效的方式。它会并行执行所有 Promise，并在所有 Promise 都解决后返回一个包含它们结果的数组。
- async/await 提升可读性： 对于复杂的异步流程，async/await 语法能够将异步代码写得像同步代码一样，极大地提高了代码的可读性和可维护性。await 关键字会暂停 async 函数的执行，直到其后的 Promise 解决。
- 错误处理： 在实际应用中，不要忘记添加错误处理机制。Promise.prototype.catch() 或 try...catch 块与 async/await 结合使用，可以有效地捕获和处理异步操作中的错误。
- 明确依赖关系： 在编写代码之前，清晰地规划异步任务的依赖关系图，有助于你更好地组织 Promise 链或 async/await 结构。
通过遵循这些原则，你可以有效地管理 JavaScript 中的复杂异步流程，构建出健壮、可读且易于维护的代码。
