Promise 是 JavaScript 中处理异步编程的重要方式之一。它可以避免回调地狱，让我们代码更加简洁、可读、可维护。而 Async/await，则是 ES7 中新增的用于简化 Promise 使用的语法糖，一时间便迅速在前端领域流传。
本文详细介绍 Promise 在 Async/await 中的使用实践，包括基本使用、错误处理和性能优化等方面。
基本使用
Promise 本身是一种异步编程的解决方案，它包含三个状态：未完成（pending）、已完成（fulfilled）和已拒绝（rejected）。通常，我们可以用以下方式构建一个 Promise 对象：
----- ------- - --- ----------------- ------- -- -
-- ----
----- ------ --- -
---------------- -- -- ------- ---------------------
- ---- -
-------------- -- -- ------- -----------------------
-
---
------------------- -- -
-- -- ------- ------
-- ----- -- -
-- -- ------- ------
---上述代码中我们创建了一个 Promise 实例，并在构造函数中传入一个异步操作的处理函数，用来标识异步操作的成功与否。当异步操作成功后，我们会调用 resolve 函数来改变 Promise 状态为已完成，并将异步操作的结果传递给 then 方法的第一个处理函数。当异步操作失败后，我们会调用 reject 函数来改变 Promise 状态为已拒绝，并将异步操作的错误信息传递给 then 方法的第二个处理函数。
在使用 Async/await 的情况下，我们可以将 Promise 的处理函数改写成使用 Async/await 进行处理：
----- -------- --------- -
--- -
----- ------ - ----- ------------------ ---- ---- -- -- --------------- - --------------
-- -- ------- ------
- ----- ------- -
-- -- ------- ------
-
-
----------在上述代码中，我们使用了 async 关键字来修饰函数，表明该函数包含异步操作。我们同时使用 try...catch 语句来处理异步操作可能出现的异常。在异步操作完成之后，我们通过 await 关键字来等待函数的返回结果。此时，在函数未返回结果之前，整个 Async/await 函数会被暂停执行。当异步操作完成后，函数会恢复执行，并将完成的结果返回给 result，或者将拒绝的错误信息返回给 catch。
错误处理
错误处理是我们在编写异步操作时必须要思考的重要问题，因为它直接决定了我们程序的健壮性。在 Promise 的基本使用中，Promise 链式调用中的错误处理非常简单。每个 then 方法的第二个参数，都是用来处理 Promise 已拒绝状态的处理函数。
------------------ ---- ---
------------ -- -
-- -- ------- ------
-- ----- -- -
-- -- ------- ------
---然而，当 Promise 链比较长时，每个 Promise 都需要对错误进行处理就会变得非常繁琐。这时，我们可以使用 Async/await 来简化错误处理。
Async/await 让我们可以像处理同步代码一样处理异步代码，在代码逻辑更加直观的情况下，同时利用 try...catch 来进行错误处理。
----- -------- --------- -
--- -
----- ------- - ----- ------------------ ---- ----
----- ------- - ----- ------------------ ---- ----
----- ------- - ----- ------------------ ---- ----
-- --------
- ----- ------- -
-- --------
-
-
----------当任何一个异步操作出错时，程序都会直接跳转到 catch 内部，进行异常处理。
性能优化
在使用 Async/await 进行前端开发的时候，我们必须注意其性能问题。因为 Async/await 的语法会导致 JavaScript 引擎代码阻塞，并对性能产生一定的影响。下面，给出一些优化 Async/await 的方法：
并行请求优化
Async/await 可以优化 Promise 的嵌套风格，但指定的异步操作仍然是串行执行。在需要执行多个异步操作的情况下，如果每个异步请求都使用 await 表达式等待上一个异步请求完成后再执行下一个请求，那么就会有问题，从而导致效率低下。为此，我们可以将异步请求并行执行：
----- -------- --------- -
--- -
----- --------- -------- -------- - ----- -------------
------------------ ----- ----
------------------ ----- ----
------------------ ----- ---
---
-- --------
- ----- ------- -
-- --------
-
-
----------在上述代码中，我们使用 Promise.all 来并行执行异步操作，而不是一个个等待执行。因此，当异步操作完成并返回结果后，我们也是同时获得结果，并按顺序进行处理。
细粒度分割函数
使用 Async/await 时，我们应该将每个步骤分割成不同的函数，这样可以保证代码更清晰，便于调试。同时，通过将函数拆分为粒度更小的函数，还可以帮助我们重构代码。
----- -------- --------- -
--- -
----- ------- - ----- ----------
----- ------- - ----- ----------
----- ------- - ----- ------------
-- -----------
-- --------
- ----- ------- -
-- --------
-
-
----- -------- --------- -
------ ------------------ ----- ----
-
----- -------- --------- -
------ ------------------ ----- ----
-
----- -------- ----------- -
------ ------------------ ----- ----
-
----------通过将要执行的异步操作分离为粒度更小的步骤，我们可以实现每个步骤的重用、更高的可重用性，以及更好的代码可维护性。同时，将异步操作分离为更细粒度的小函数可能会减少代码的体积，同时提高运行效率；因为拆分的函数尽可能的细化了代码，并且更容易成为某种情况下的缓存数据来源。
总结：Promise 在 Async/await 中的使用实践
- Promise 可以处理异步编程流程，避免回调地狱
- Async/await 是 Promise 的语法糖，更直观的处理异步操作
- Async/await 让异常处理更简单，通过
try...catch处理异步操作中的错误 - 使用 Async/await 时，需要注意优化在并行请求中，并将函数细分。这可以提高代码的可读性和性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c5fbc895c405902ee46d7d