JavaScript 中 async/await 的核心用法与原理解析

async/await 概述

上一篇介绍了“JavaScript 中的 Promise 使用详解”，主要涵盖了基本用法及个人对 Promise 的理解，文中若有疏漏欢迎指正。本文将重点探讨“JavaScript 中 async/await 的用法与理解”。

JavaScript 中 async/await 的用法与理解

编程语言中的每个关键字都有其特定含义，我们首先从字面意思入手进行理解。

async 关键字详解

1. async

async 是“异步”的缩写。使用 async 关键字声明的函数为异步函数，其返回值始终是一个 Promise 对象。如果 async 函数返回的值不是 Promise，JavaScript 引擎会自动使用 Promise.resolve() 将其包装为 Promise。

async function test() {
 return 'hello word'
}
test();

运行上述代码，返回结果如下：

await 关键字机制

2. await

await 可视为 async wait 的简写，因此易于理解：async 用于声明一个函数为异步函数，而 await 用于等待一个异步方法执行完毕。

如果 await 等待的目标不是一个 Promise 对象，那么 await 表达式的运算结果即为该目标本身。

如果 await 等待的是一个 Promise 对象，它会阻塞后续代码的执行，直到该 Promise 对象状态变为 resolve，并将 resolve 的值作为 await 表达式的运算结果。

执行顺序与阻塞分析

参考以下代码段：

function test() {
 return new Promise(resolve => {
  setTimeout(() => resolve("hello word"), 2000);
 });
}

const result = test();
console.log(result.then((val)=>{console.log(val)}));
console.log('结束')

我们结合编辑器的代码执行顺序来分析：

1. 首先定义一个方法，该方法返回 Promise 对象，并在两秒后通过 .then() 函数返回调用成功。

2. 接下来实例化 test() 函数。

3. 调用 result 对象的 then() 函数以接收返回值，请注意，此处操作是异步的。

4. 打印日志结束。

运行代码，观察结果：

可以看到先打印“结束”，随后才打印“hello word”，这体现了异步执行的特点。我们对代码进行改造：

function test() {
 return new Promise(resolve => {
  setTimeout(() => resolve("hello word"), 2000);
 });
}

const result = await test();
console.log(result);
console.log('结束')

使用 await 关键字接住 test() 函数，观察此次返回结果：

我们发现先打印“hello word”，随后才打印“结束”。由于 test() 造成的阻塞，console.log('结束') 会等待两秒后执行。

优缺点总结

接下来讨论其优缺点：

优点：相较于 Promise，async/await 处理 then 调用链时，代码清晰度大幅提升，几乎与同步代码无异。

缺点：滥用 await 可能导致性能问题，因为 await 会阻塞代码执行。

总结

至此，关于 JavaScript 中 async/await 的用法与理解的文章介绍完毕。如需了解更多 JavaScript 异步/等待相关内容，请搜索本站往期文章或继续阅读后续文章，感谢大家的支持！