从实用角度理解 JavaScript 的 Promise 和 async/await

2024-01-08 20:07:43

掌握异步编程：Promise 与 async/await 的奥秘

在 JavaScript 的世界中，异步编程是至关重要的，它使我们能够管理并行执行的操作，而无需阻塞主线程。了解如何熟练使用 Promise 和 async/await 对于编写高效、可扩展的应用程序至关重要。

Promise 是处理异步操作的有力工具。它是一个对象，代表一个最终会完成或失败的操作。当您创建 Promise 对象时，您提供一个执行器函数，该函数将接收两个回调：resolve 和 reject。

当异步操作成功完成时，resolve 函数被调用，并向 Promise 提供结果值。当操作失败时，reject 函数被调用，并向 Promise 提供错误值。

您可以使用 .then() 方法指定成功或失败的回调。then() 方法接受两个函数作为参数：onFulfilled 和 onRejected。这些函数在 Promise 完成或失败时被调用。

async/await 是 ES2017 引入的语法糖，它使我们能够使用同步写法编写异步代码。async 函数是包含 await 表达式的特殊函数。await 表达式暂停 async 函数的执行，直到异步操作完成，然后返回结果。

async/await 的语法非常简洁。您可以使用 await 暂停函数执行，并等待 Promise 完成。例如：

async function myAsyncFunction() {
  const result = await Promise.resolve('成功');
  console.log(result); // 输出: '成功'
}

在上述示例中，myAsyncFunction 是一个异步函数，它使用 await 表达式暂停执行，直到 Promise 返回 '成功'。

Promise 和 async/await 都是处理异步操作的工具，但它们有以下不同之处：

语法： Promise 使用 .then() 方法指定成功和失败的回调，而 async/await 使用 await 表达式暂停函数执行并等待异步操作完成。
可读性： async/await 的代码更易读、更接近同步代码，而 Promise 的代码可能更难以理解，尤其是当嵌套多个 .then() 方法时。
错误处理： Promise 和 async/await 都支持错误处理，但 async/await 的错误处理更简单，只需要在 await 表达式后面跟一个 try...catch 块即可。