异步编程是前端开发中必不可少的一部分，Promise 和 async/await 是其中较新的解决方案。本文将详细介绍 Promise 和 async/await 的使用方法及其优势与不足，并提供示例代码。
Promise 的使用方法
Promise 是一种用于处理异步操作的对象。它是一个代理对象，可以用于处理异步操作结果的状态。Promise 有三种状态：
- pending： 它既不是 fulfilled 也不是 rejected 状态。在这种状态下，Promise 对象可以转为 fulfilled 或 rejected 状态。
- fulfilled：意味着异步操作成功完成并返回一个值。
- rejected：意味着异步操作失败，并返回一个错误。
Promise 对象有两个方法：then() 和 catch()。then() 方法用于处理成功返回的结果，catch() 方法用于处理失败的情况。下面是一个 Promise 的示例代码：
-- -------------------- ---- -------
-------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
--------------
-- ------
---
-
---------
-------------- -- -
-------------------- -- -----
--
-------------- -- -
-------------------
---async/await 的使用方法
async/await 是 ES2017 中提供的针对异步编程的另一种解决方案。async/await 的核心是 async 函数和 await 表达式。async 函数是返回一个 Promise 对象的函数，await 表达式可以在 async 函数内等待一个 Promise 对象的解决或拒绝。
下面是一个 async/await 的示例代码：
-- -------------------- ---- -------
-------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
--------------
-- ------
---
-
----- -------- ----------- -
----- ------ - ----- ----------
--------------------
-
------------ -- -----从上面的代码可以看出，使用 async/await 表达式，我们可以避免使用 then() 和 catch() 方法，代码更加简洁明了。
async/await 的优势与不足
相比之下，使用 async/await 代码更加清晰简洁、易于处理错误，有以下优点：
- 代码可读性更高：使用 async/await 能够清晰地展示异步过程的顺序和控制流。
- 错误处理更清晰：不用像使用 Promise 的 .catch() 那样需要一层层嵌套处理，而是通过 try/catch 的异常处理机制，更直观地处理错误。
- 使用链式调用：async/await 链式调用代码比 Promise 要清晰简洁，更易于理解和扩展。
但是，async/await 也有一些需要注意的方面：
- 错误处理不能返回非 Promise 格式的值：在 async/await 中，抛出错误必须使用 throw 抛出，否则会被当做成功处理了。
- 不适用与循环遍历：因为要等待异步执行结果，如果在循环中使用，将无法保证异步操作完成的先后顺序。
- 执行顺序不能交错：与 .then() 链模式不一样的是，await 会暂停代码执行直到 Promise 返还结果，因此我们需要注意 async 函数之间的执行顺序，否则会出现某些异步操作被阻塞的情况。
结论
本文介绍了 Promise 和 async/await 的使用方法及其优缺点。总的来说，使用 async/await 代码更加简洁明了、易于阅读，对于处理异步码时来说，是一个非常值得推崇的方式，但是也需要注意使用过程中的一些注意事项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672451152e7021665e13061a