小白也能学会的 ES8 async/await 实战教程
随着 JavaScript 的发展和应用场景的不断扩大，对于前端工程师而言，对其掌握的技术水平也提出了更高的要求。ES8 async/await 是现在在前端领域中非常流行的技术，也是 JavaScript 跨平台异步编程的一种新范式，同时也是继 Promise 之后 JavaScript 异步编程的又一重要里程碑。
ES8 async/await 使用了 async 和 await 两个关键字来解决 Promise 所面临的问题，并且大大减小了代码量。这篇文章将为大家详细介绍 ES8 async/await 的实战应用，让大家能够轻松上手，掌握这一新技术。
异步编程的问题
在 JavaScript 中，进行异步编程往往会遇到很多问题，例如：
- 回调函数嵌套过多，造成代码难以维护；
- 异常处理多个嵌套 catch 库代码难以理解调试；
- 数据依赖不清，容易出现循环依赖等问题。
这些问题限制了异步编程在 JavaScript 中的应用。而 ES8 async/await 的出现，则能够很好地解决这些问题。
ES8 async/await 内部原理
在理解 ES8 async/await 的使用前，先了解其内部原理。
async/await 具体来说是基于 Promise 的。async 函数默认返回一个 Promise 对象，而 await 关键字在等待 Promise 或者不是 Promise，直接返回结果的基础上，还具有让 async 函数暂停执行异步代码的功能。举个例子：
async function foo(){
await bar();
await baz();
};bar() 和 baz() 都是异步操作，执行时需要等待，我们需要等待 bar() 完成后才能进行 baz() 操作，而 await 就是使得 foo() 在执行到 await bar() 的时候等待 bar() 完成后再执行后面的代码。
基本使用教程
现在，我们以一个实践的形式，来学习 ES8 async/await 的基本使用方法。
1、安装 Node.js
Node.js 是目前使用最广泛的 JavaScript 运行环境，安装它可以在本地快速搭建 JavaScript 执行环境。可以通过官网下载安装包进行安装。
2、创建项目并安装依赖
执行以下命令，创建一个新的项目，并安装 Express 等开发用到的依赖。
mkdir es8-async-await-demo cd es8-async-await-demo npm init -y npm install express
3、编写服务器程序
根据我们的需要，编写服务器程序，并开放一个接口对其进行访问。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - -----
------------ ----- ----- ---- -- -
----- ------ - ----- ----------
---------- ----- ---- ------ ---
---
-------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
-------------- --------
-- ------
---
-
---------------- -- -- -
-------------------- --- --------- -- ---------------------------
---4、运行程序
执行以下命令，启动服务器。
nodemon index.js // 可以使用 nodemon 热更新
5、访问接口
通过浏览器访问接口，发现返回了一个包含“Hello World”的数据。
至此，我们就成功地使用 ES8 async/await 编写了一个实例！在实现异步操作的同时，还有效地解决了过多嵌套、异常处理和循环依赖等问题，使得异步编程更加方便和易于维护。
总结
ES8 async/await 技术使用简单，很快就能上手，是前端工程师们在处理异步编程问题时的好帮手。本文从内部原理、基本使用教程等方面为大家详细介绍了 ES8 async/await 的应用，相信对于掌握了这一技术的前端工程师而言，就能更好的应对JavaScript中的异步编程问题，进而提高开发效率。
附代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - -----
------------ ----- ----- ---- -- -
----- ------ - ----- ----------
---------- ----- ---- ------ ---
---
-------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
-------------- --------
-- ------
---
-
---------------- -- -- -
-------------------- --- --------- -- ---------------------------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64952dae48841e9894270df4