前端面试题 - 21. async await的原理是什么?

245 阅读2分钟

原理

async/await 是 JavaScript 中用于异步编程的一种语法糖,它是基于 Promise 实现的。async/await 让异步代码的编写和阅读更加像同步代码,从而提高了代码的可读性和可维护性。 async 函数本质上是一个返回 Promise 对象的函数,await 关键字只能在 async 函数中使用,它可以暂停 async 函数的执行,等待一个 Promise 对象的完成,然后返回 Promise 执行的结果。 async/await 的原理可以简单地概括为以下几个步骤:

  1. async 函数返回一个 Promise 对象,可以使用 then 方法或 await 关键字来获取 Promise 的执行结果。
  2. 在 async 函数中使用 await 关键字来等待一个 Promise 对象的完成,await 会暂停 async 函数的执行,直到 Promise 对象的状态变为 resolved 或 rejected。
  3. 如果 await 关键字后面的 Promise 对象成功执行,await 表达式会返回 Promise 的执行结果;如果 Promise 对象执行失败,await 会抛出一个错误,可以使用 try/catch 语句来捕获错误。
  4. async 函数中可以包含多个 await 关键字,它们会按照顺序依次执行。
  5. 使用 async/await 时,可以使用 try/catch 语句来捕获所有 await 表达式中抛出的错误。 总之,async/await 是一种基于 Promise 的异步编程方式,它通过语法糖的方式简化了异步代码的编写和阅读,让异步代码更加易于理解和维护。

示例

以下是一个使用 async/await 的示例代码:

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  return data;
}

编译后的代码如下:

function getData() {
  return __awaiter(this, void 0, void 0, function* () {
    const response = yield fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = yield response.json();
    return data;
  });
}

可以看到,使用 async/await 编写的代码最终被编译成了使用 Promise 的形式。其中,async 函数被编译成一个返回 Promise 对象的函数,而 await 表达式则被编译成了 yield 关键字,表示暂停当前函数的执行,等待 Promise 对象的完成。在编译后的代码中,使用了一个名为 __awaiter 的函数来处理 async/await 的语法糖,它会将 async 函数转换为基于 Promise 的形式,并在运行时处理异步操作的执行和结果。