前言
在前端开发中，异步操作是非常常见的。JavaScript 对异步操作的支持有诸多方式，Promise 和 async/await 也是其中较为重要的两种方案。Promise 是 ES6 标准添加的实现异步编程的机制，是一种比较简单的方式，但是当遇到复杂的异步编程时，可能会变得混乱。而 async/await 基于 Promise 和 Generator，提供了一种更加简单的方式，使代码更易读、更易维护。本文将介绍 Promise 和 async/await 的原理及它们的转换技巧。
Promise
Promise 的实现原理
Promise 的本质是一个状态机，可以理解为我们在调用一个异步操作时，返回了一个代表这个操作的 Promise 对象，这个对象会在异步操作完成时转变成 Pending 状态，当异步操作成功时，则变成 Resolve 状态，反之则变成 Reject 状态。Promise 对象的状态变化只能由 Pending 转变成 Resolve 或 Reject 状态，状态一旦变化就无法再次改变。
用法
Promise 的用法较为简单，使用时只需调用它的 then 和 catch 方法即可。
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
--------
---- -----------------------------
-------- --------
------ ------
---
---
-
--------------------- -- ---------------------------- -- ------------------转换技巧
当使用 Promise 进行异步编程时，可能会出现一些嵌套的情况，造成代码可读性较差的问题。如果要将 Promise 转换成 async/await，只需在函数前面添加 async 关键字即可。
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- ---- - ----- -------------------------------------
------------------
- ---------- -
-----------------
-
-
------------async/await
async/await 的实现原理
async/await 是基于 Promise 和 Generator 的语法糖。async 函数返回的是一个 Promise 对象，而 await 表达式会等待 Promise 对象 resolve，如果 Promise resolve 则 resolve await 表达式，否则会 reject Promise 对象，并抛出异常。
用法
使用 async/await 时，可以将一些 Promise 处理链合并，让代码更加易读。
-- -------------------- ---- ------- -------- ----------- - ------ ------------------------------------- - -------- ------------------- - ------ ------------------------------------------------- - -------- ------------------- - ------ ------------------------------------------------- - ----- -------- ---------- - ----- ---- - ----- ------------ ----- ------ - ----- --------------------- ----- ----- - ----- ------------------------- ----------------- ------- ------- - -----------
转换技巧
Promise 转换成 async/await 时，只需在函数定义前面添加 async 关键字，在需要等待 Promise 的地方添加 await 关键字即可。
-- -------------------- ---- -------
-------- ----------- -
------ -------------------------------------
-
-------- ------------------- -
------ -------------------------------------------------
-
-------- ------------------- -
------ -------------------------------------------------
-
----- -------- ---------- -
--- -
----- ---- - ----- ------------
----- ------ - ----- ---------------------
----- ----- - ----- -------------------------
----------------- ------- -------
- ---------- -
-----------------
-
-
-----------总结
本文介绍了 Promise 和 async/await 的原理及应用场景，同时提供了从 Promise 转换到 async/await 的技巧。通过使用 async/await，我们可以写出更加清晰、易读的异步代码，提高代码的可维护性及代码效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501654695b1f8cacdf1f1fc