ES8 引入了 async/await，它是 JavaScript 异步编程的重大进展，可以使代码更加简洁易懂，也更加可读性强。在实际开发中，使用 async/await 可以大大提高代码的可维护性和可读性。本文将通过实际场景演练，介绍 async/await 的使用方法和注意事项。
简介
async/await 是 JavaScript 异步编程的新解决方案，它是 Promise 的语法糖，可以让我们更方便地使用 Promise 进行异步编程。async 函数返回一个 Promise 对象，可以使用 await 等待 Promise 对象的执行结果。
实际场景演练
下面我们来演示一个实际场景，假设我们需要开发一个网站，用户可以在网站上上传图片，我们需要对上传的图片进行压缩和水印处理。我们使用 async/await 对这个过程进行异步编程。
1. 安装依赖
我们需要安装一些依赖，包括：imagemagick、gm、async、multer。
--- ------- ----------- -- ----- ------ ------
2. 编写代码
我们先来看一下完整的代码：
----- ----- - -----------------
----- -- - ------------------------------------ -------
----- ------ - ------------------
----- ------ - ------------- -------------
----- ------- - -------------------
----- --- - ----------
------------------- ----------------------- ----- ----- ---- -- -
--- -
-- ----
----- --------------- - ----- -----------------------------
-- ---
----- ---------------- - ----- ------------------------------
-- ----
----------
------- ----
---- ----------------
---
- ----- ------- -
-------------------
----------
------- ----
-------- ------
---
-
---
-------- ------------------- -
------ --- ----------------- ------- -- -
--------
------------ ----
-------------------------------- ------- -- -
-- ------- -
--------------
- ---- -
----------------------------------
-
---
---
-
-------- ------------------ -
------ --- ----------------- ------- -- -
--------
------------------ ---
------------- --- ------------
------------------------------- ------- -- -
-- ------- -
--------------
- ---- -
---------------------------------
-
---
---
-
---------------- -- -- -
------------------- -- ------- -- ---- -------
---首先，我们引入了 async、gm、multer 三个依赖。async 用于异步编程，gm 用于处理图片，multer 用于处理文件上传。
然后，我们创建了一个 Express 应用，并监听了 3000 端口。接着，我们编写了一个 POST 接口 /upload，用于上传图片。
在接口中，我们使用了 async/await 进行异步编程。首先，我们调用 compressImage 函数对上传的图片进行压缩。compressImage 函数返回一个 Promise 对象，我们使用 await 等待 Promise 对象的执行结果。如果 Promise 对象被 reject 了，我们会捕获错误并返回上传失败的信息。
接着，我们调用 addWatermark 函数对压缩后的图片添加水印。addWatermark 函数也返回一个 Promise 对象，我们同样使用 await 等待 Promise 对象的执行结果。如果 Promise 对象被 reject 了，我们也会捕获错误并返回上传失败的信息。
最后，我们返回上传成功的信息，包括状态码和图片的 URL。
3. 运行程序
我们可以使用 Postman 工具，向 /upload 接口发送 POST 请求，上传一张图片。上传成功后，我们可以在 uploads 目录下看到上传的图片、压缩后的图片和添加水印后的图片。
总结
async/await 是 JavaScript 异步编程的新解决方案，它可以让我们更方便地使用 Promise 进行异步编程。在实际开发中，我们可以使用 async/await 处理复杂的异步逻辑，使代码更加简洁易懂，也更加可读性强。在使用 async/await 时，需要注意错误处理和代码结构的清晰。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fe9a6bd10417a2229d8714