js--promise、async 和 await 相关知识总结.doc

## JavaScript Promise、async 和 await 知识详解 ### 1. Promise 基础 Promise 是 JavaScript 中用于处理异步操作的一种机制，它解决了传统的回调函数模式（回调地狱）导致的代码可读性和可维护性问题。Promise 有三种状态： - **Pending（等待中）**：初始状态，既没有完成，也没有失败。 - **Fulfilled（已完成）**：表示异步操作成功，通常会带有成功的结果。 - **Rejected（已失败）**：表示异步操作失败，通常会带有错误原因。 创建 Promise 实例时，可以传入两个参数：`resolve` 和 `reject`，它们是两个回调函数，分别对应异步操作成功和失败的情况。 ```javascript new Promise((resolve, reject) => { // 异步操作 if (/* 成功条件 */) { resolve('成功结果'); } else { reject('失败原因'); } }); ``` ### 2. Promise 的 then 方法 Promise 实例上的 `then` 方法用于注册成功和失败的回调函数。当 Promise 状态变为 Fulfilled 或 Rejected 时，对应的回调函数会被调用。`then` 返回一个新的 Promise 实例，这就是 Promise 链式调用的基础。 ```javascript const p = new Promise((resolve, reject) => { // 异步操作 }); p.then((data) => { // 成功处理 }, (err) => { // 错误处理 }).then((data) => { // 更多处理 }); ``` ### 3. Promise 的 catch 方法 `catch` 方法用于捕获在 Promise 链中任何地方抛出的错误。它等价于在 `then` 方法中提供一个 `onRejected` 回调。 ```javascript p.then((data) => { // 可能抛出错误 }).catch((err) => { // 错误处理 }); ``` ### 4. async/await 语法 ES2017 引入了 `async` 和 `await` 关键字，它们与 Promise 结合使用，提供了更简洁的异步编程方式。`async` 关键字用来定义一个异步函数，而 `await` 关键字用来等待一个 Promise 完成并返回结果。 ```javascript async function myAsyncFunction() { try { const result = await somePromise(); // 使用 result } catch (error) { // 错误处理 } } ``` 在 `async` 函数内部，`await` 关键字后面的表达式必须是一个 Promise。`await` 会暂停当前函数的执行，直到 Promise 解决（Fulfilled）或拒绝（Rejected），然后返回 Promise 的结果或抛出错误。 ### 5. async/await 与 Promise 的关系 虽然 `async/await` 提供了更直观的异步编程体验，但它们本质上仍然是基于 Promise 的。`async` 函数会返回一个 Promise，而 `await` 表达式会等待这个 Promise 的结果。这意味着你可以在 `try...catch` 块中处理异常，就像在同步代码中一样。 ### 6. Promise.all 和 Promise.race - `Promise.all` 用于并发执行多个 Promise，并在所有 Promise 都完成时返回一个包含所有结果的新 Promise。如果有任何一个 Promise 失败，那么 `Promise.all` 会立即返回一个被拒绝的 Promise。 ```javascript Promise.all([p1, p2, p3]).then(values => { // 所有 Promise 完成后的处理 }).catch(error => { // 任意一个 Promise 失败的处理 }); ``` - `Promise.race` 会在第一个 Promise 完成（无论成功或失败）时立即返回一个相应的 Promise。 ```javascript Promise.race([p1, p2]).then(result => { // 第一个 Promise 成功的处理 }).catch(error => { // 第一个 Promise 失败的处理 }); ``` ### 7. Promise.resolve 和 Promise.reject - `Promise.resolve(value)` 可以将一个值转换为 Promise，如果值已经是 Promise，它将直接返回该 Promise。 - `Promise.reject(error)` 创建一个被拒绝的 Promise，通常用于在错误发生时快速返回。 ### 8. Promise.prototype.finally `finally` 方法在 Promise 不管成功还是失败都会执行的回调，通常用于清理工作。 ```javascript p.then(result => { // 成功处理 }).catch(error => { // 错误处理 }).finally(() => { // 清理工作 }); ``` 总结，Promise、async 和 await 为 JavaScript 的异步编程提供了强大的工具，它们使得异步代码更加清晰、易于理解和维护。通过理解这些概念和用法，开发者可以更好地管理复杂的异步逻辑，避免回调地狱，提升代码质量。