理解 JS-async 与 await 异步处理的运作原理

2024-01-22 12:53:40

Async/Await：JavaScript 异步编程的福音

在现代快节奏的互联网时代，异步编程已成为软件开发的基石，它能显著提升应用程序的响应性和性能。JavaScript 作为一门单线程语言，通过事件循环机制来处理异步操作，确保主线程的流畅运行。本文将深入探讨 Async/Await，一种基于 Promise 的语法糖，它让 JavaScript 异步编程变得更加直观和易用。

Async 函数：让异步操作不再烦琐

Async 函数是使用 async 定义的函数，它引入了 await ，让我们能够轻松等待异步操作的完成。其语法如下：

async function myAsyncFunction() {
  // 异步操作
  await Promise.resolve(1);
  // 其他代码
}

Await 暂停函数，等待结果

await 关键字用于等待异步操作的完成，它只能在 async 函数中使用。await 关键字后的表达式必须是一个 Promise 对象。当 await 表达式被执行时，JavaScript 引擎会暂停 async 函数的执行，直到 Promise 对象被解析或拒绝。一旦 Promise 对象被解析，await 表达式的值就会成为 async 函数的返回值。如果 Promise 对象被拒绝，async 函数就会抛出错误。

Async/Await 的工作原理：幕后一探究竟

Async/Await 的工作原理与 Promise 类似。当 async 函数被调用时，JavaScript 引擎会创建一个 Promise 对象，然后将剩余的 async 函数操作放入该 Promise 对象中。当 await 表达式被执行时，JavaScript 引擎会暂停 async 函数的执行，直到 Promise 对象被解析或拒绝。一旦 Promise 对象被解析，await 表达式的值就会成为 async 函数的返回值。如果 Promise 对象被拒绝，async 函数就会抛出错误。

Async/Await 与 Promise：异同对比

Async/Await 和 Promise 是 JavaScript 中处理异步操作的两种不同方法，它们既有相似之处，也有不同之处。

相似之处

它们都可以处理异步操作。
它们都可以使用 then() 和 catch() 方法处理异步操作的结果和错误。
它们都可以创建异步函数。

不同之处

Async/Await 的语法更加简洁直观，而 Promise 的语法相对复杂。
Async/Await 可以直接使用 await 关键字等待异步操作的完成，而 Promise 需要使用 then() 或 catch() 方法处理异步操作的结果和错误。
Async/Await 函数可以作为普通函数使用，而 Promise 函数不能作为普通函数使用。