前言
在 JavaScript 前端编程中，异步编程是必不可少的技能。在 ES2017 中，新的异步编程方式 async 和 await 被引入。它们简化了异步编程，使代码更加清晰可读。本文将介绍 await 和 async 的使用方法，包括其语法、原理和示例代码。希望本文能够对大家学习和掌握异步编程技巧有所帮助。
什么是异步编程
在 JavaScript 中，单线程是指一次只能执行一个任务，如果一个任务耗时过长会影响用户体验。为了避免这种情况，JavaScript 采用了异步编程方式。
异步编程是指在执行耗时任务时，不会阻塞主线程的运行，而是在线程空闲时启用一个新的线程来执行该任务，等任务完成后再返回结果。在 JavaScript 中，异步编程常用的方式有回调函数、Promise 和 async/await。
await 和 async 的语法
async 用于声明一个函数是异步的，返回值是一个 Promise 对象。await 只能在异步函数中使用，用于等待 Promise 对象执行完成，然后返回该异步函数的结果。
下面是一个 async 和 await 的例子：
async function getExample() {
const result = await promiseFunc();
return result;
}在上面的代码中，promiseFunc() 返回一个 Promise 对象，当它执行完成时，result 变量才会被赋值为该 Promise 对象的结果。在 await 语句执行期间，若该 Promise 对象未完成，则暂停 await 语句的执行，等待该 Promise 对象完成后再继续执行。
async 和 await 的原理
async 和 await 的实现原理是基于 Promise 对象的。在异步函数中使用 await 时，该 await 表达式会返回该 Promise 对象的结果。如果该 Promise 对象是已经完成的，await 表达式会立即返回结果。如果该 Promise 对象是未完成的，则暂停当前异步函数，并将该异步函数加入到待执行队列。当该 Promise 对象完成后，重新让当前异步函数继续执行。
下面是一个关于异步编程的示例代码：
-- -------------------- ---- -------
-------- ------------- -
------------------- ----------- -------
------ ------------------------- -- -
------------------ ----------- ---------- --------
------ -------
-- ----- -- -
------------------ ----------- ---------- -------
----- ------
---
-
------------------- ----------- -------
------------------------- -- -
------------------ ----------- ---------- --------
-- ----- -- -
------------------ ----------- ---------- -------
----- ------
---在上面的代码中，exampleCall 函数是一个使用 Promise 开发的异步函数。在执行 exampleCall 函数时，会先执行第一个 console.log() 语句，在调用 promiseFunc 函数时输出一段信息，并在 promiseFunc 函数调用完成后，执行 then() 方法并输出信息。在输出 After exampleCall resolved 后，才执行 exampleCall() 函数的 then() 方法并输出信息。
await 和 async 的优缺点
async 和 await 是 ES2017 中的新特性，具有以下优点：
- 简化 Promise 的语法。
- 可以使异步代码看起来更像同步代码，易于阅读和理解。
- 可以在
try...catch语句块内使用，更容易捕获异步函数中的错误。
不过，async 和 await 也有缺点：
- 无法控制异步过程，一旦开始执行就无法暂停或取消。
- 因为所有的异步操作在同一个事件循环中执行，对于一些网络请求量的大应用来说，可能会引发阻塞。
总结
在本文中，我们介绍了 await 和 async 的使用方法，包括其语法、原理和示例代码。异步编程是前端编程中重要的一环，通过学习 await 和 async，我们可以更加轻松地编写异步代码，并使代码更加清晰可读。希望本文对大家掌握前端异步编程技巧有所帮助。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654615077d4982a6ebfdd495