在现代的前端开发中，异步编程是不可避免的问题。Promise 和 Async/await 是两种非常流行的异步编程方式，它们可以帮助我们更方便地处理异步操作，避免回调地狱，提高代码可读性和可维护性。本文将详细介绍 Promise 和 Async/await 的使用方法，以及它们的优缺点和注意事项。
Promise 的使用
Promise 是 ES6 中新增的一种异步编程方式，它可以将异步操作封装成一个 Promise 对象，可以通过 then() 方法链式调用，也可以通过 catch() 方法捕获异常。Promise 有三种状态：pending、fulfilled 和 rejected。当 Promise 对象的状态从 pending 变为 fulfilled 或 rejected 时，就会触发 then() 或 catch() 方法。
下面是一个简单的 Promise 示例：
-- -------------------- ---- -------
-------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
----- ---- - - ----- ------- ---- -- --
--------------
-- ------
---
-
------------------- -- -
------------------
-------------- -- -
---------------------
---在这个示例中，我们定义了一个名为 getData() 的函数，它返回一个 Promise 对象。在 Promise 对象的构造函数中，我们使用 setTimeout() 模拟了一个异步操作，1 秒后返回一个对象。如果异步操作成功，我们调用 resolve() 方法将结果传递给 then() 方法，否则调用 reject() 方法将错误传递给 catch() 方法。
在调用 getData() 函数后，我们可以通过 then() 方法获取到异步操作的结果，也可以通过 catch() 方法捕获异常。需要注意的是，Promise 的 then() 方法返回一个新的 Promise 对象，因此可以进行链式调用。
Async/await 的使用
Async/await 是 ES8 中新增的异步编程方式，它是基于 Promise 的语法糖，可以让我们更方便地处理异步操作。Async/await 的语法非常简洁，它使用 async 和 await 关键字来标识异步函数和等待异步操作完成的语句。使用 Async/await 可以避免回调地狱，提高代码可读性和可维护性。
下面是一个使用 Async/await 的示例：
-- -------------------- ---- -------
-------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
----- ---- - - ----- ------- ---- -- --
--------------
-- ------
---
-
----- -------- ------ -
--- -
----- ---- - ----- ----------
------------------
- ----- ------- -
---------------------
-
-
-------在这个示例中，我们使用 async 关键字定义了一个异步函数 main()，它使用 await 关键字等待 getData() 函数返回结果。如果异步操作成功，我们可以直接使用返回结果，否则会抛出一个异常，可以通过 try-catch 语句捕获异常。
需要注意的是，使用 Async/await 时需要注意异步函数的返回值，它应该是一个 Promise 对象。如果异步函数返回的是一个非 Promise 对象，Async/await 会将它自动封装成一个 Promise 对象。
Promise 和 Async/await 的比较
Promise 和 Async/await 都是非常流行的异步编程方式，它们各有优缺点，我们需要根据具体的业务场景选择合适的方式。
Promise 的优点是语法简单，可以链式调用，容易理解和维护。但是当需要处理多个异步操作时，Promise 的嵌套会导致代码可读性变差，出现回调地狱的问题。
Async/await 的优点是语法简洁，易于理解和维护，可以避免回调地狱的问题。但是需要注意的是，Async/await 只能用于异步函数中，不能用于普通函数中。另外，Async/await 的性能相对 Promise 略差，因为它需要等待 Promise 对象的状态改变后才能继续执行。
总结
Promise 和 Async/await 都是非常流行的异步编程方式，它们可以帮助我们更方便地处理异步操作，避免回调地狱，提高代码可读性和可维护性。需要根据具体的业务场景选择合适的方式，避免滥用。在使用 Promise 和 Async/await 时，需要注意异步函数的返回值和错误处理，以及它们的优缺点和注意事项。
示例代码见：https://codepen.io/pen/?template=ZEpQeJN
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dec1981886fbafa4c046eb