在前端开发中，异步编程是经常需要处理的一个问题，ES6 的 Promise 给我们带来了很大的便利。但是，当我们需要同时处理多个异步操作时，Promise 的 then 链条会让代码显得很臃肿难以维护。ES7 的 async/await 提供了一种更优雅的方式来处理异步操作，本文将详细介绍如何使用 async/await 替代 Promise，并包含实际的示例代码。
async/await 简介
async/await 是 ES7 中新增的语法糖，它基于 Promise，但可以让我们更方便地编写异步代码。在使用 async/await 时，我们需要用到两个新的关键字：async 和 await。其中，async 用于定义一个返回 Promise 的异步函数，await 用于等待 Promise 的结果。
async/await 使得异步编程变得更加直观，我们可以像编写同步代码一样编写异步代码。例如，下面的代码片段展示了使用 async/await 语法来获取用户信息的示例：
-- -------------------- ---- -------
----- -------- --------------- -
----- ---- - ----- -----------------------------
-------------- -- ----------------
------------ -- ----------------------
------ -----
-
----- -------- ------------------- -
----- ---- - ----- ----------------
----------------- ------------ --- ---- -----------
-以上代码定义了两个异步函数，getUser 和 displayUser。getUser 用于获取用户信息，displayUser 用于展示用户信息。使用 async/await，我们可以在 getUser 函数中等待 fetch 的结果，避免了 then 链条式的写法。
使用 async/await 替代 Promise
接下来，让我们看看如何使用 async/await 替代 Promise。使用 async/await 的方式就是定义一个异步函数，使用 await 等待异步操作完成后返回结果或抛出错误。示例如下：
-- -------------------- ---- -------
----- -------- ----------------------------- -
--- -
----- -------- - ----- --------------------------------------------------------
-- -------------- -
----- --- ----------- -------- ------ ------------------ -------------------------
-
----- -------- - ----- ----------------
------ ---------
- ----- ------- -
---------------------
-
-如上代码，fetchStarshipData 函数使用了 async/await 语法，它等待网络请求的结果（使用 fetch API）。如果请求成功，response 对象中包含响应内容，通过 await response.json() 调用获取并转换成可读对象，再通过 return 返回。如果请求失败或发生错误，将抛出错误。相比于 Promise 链式处理我们可以做到代码更优雅。
async/await 的错误处理
使用 async/await 时，我们在异步函数中使用 try/catch 异常捕获语法处理异常。当我们等待一个失败的 Promise 时，try 块中包含 await 的 Promise 将转为 reject。我们可以通过 catch 块捕获它，并在其中处理异常。
-- -------------------- ---- -------
----- -------- --------------------- -
--- -
----- -------- - ----- ------------------------------
-- -------------- -
----- --- ----------- -------- ------ ------------------ -------------------------
-
----- ---- - ----------------
------ -----
- ----- ------- -
---------------------
----- ------ -- ------------------------
-
-
----- -------- ----------------------- -
--- -
----- ---- - ----- ----------------------
-----------------------
- ----- ------- -
---------------------
-
-这里我们定义了两个异步函数 fetchUserData 和 displayUserData。fetchUserData 定义在 try/catch 块中以捕获 Promise 的失败并抛出错误，displayUserData 也定义在 try/catch 块中以捕获异步函数的异常。我们可以通过 catch 块中的 console.error 语句来记录异常信息并处理错误。
async/await 的运用场景
下面是一些 async/await 适用的场景：
- 数据库或网络请求
- 文件或图片上传和下载
- 常见 I/O 操作
下面这个例子展示了 async/await 的基本逻辑，其中采用了以上提到的网络请求场景。
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- -----------------------------------------------------
----- ------ - ----- ----------------
----- -------- - --- ------- -- ----
----- -------- - ------------------- -- -----------------------------
--------------------- --------- ----------
- ----- ------- -
----------------------- -------
-
-
------------上述代码从官方的 JSONPlaceholder 网站获取了一些照片，然后使用 Set 进行筛选，最后 log 输出我们筛选后的结果。我们几乎在每一个异步操作前都使用了 await，在操作成功时进行了 log 输出，失败时使用 catch 捕获并输出错误。
总结
使用 async/await 可以使我们书写的异步代码更直观、更易读、更简洁，可以大幅提高我们的开发效率。本文针对使用 async/await 替换 Promise 进行了详细分析，希望读者们能够掌握这一技术并运用到实际项目开发中。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bc5eb48841e9894a1076b