在现代的前端开发中，异步操作非常常见。经常需要执行多个异步操作然后再处理结果。在 JavaScript 中，Promise 和 async/await 是处理异步操作的两种常见方式。Promise 早已成为前端开发者的标配，但是不久之前，async/await 也逐渐流行。本文将详细探讨 Promise 和 async/await 的用法和区别。
Promise
Promise 是一种用于处理异步操作的对象，最初由社区提出并成为 ES6 的一部分。Promise 将异步操作分解成三个状态：未完成（pending）、已完成（fulfilled）、已失败（rejected）。可以根据 Promise 的三种状态来进行不同的操作。
用法
下面是 Promise 的基本用法。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ----------- ---- --
----- --- - --- -----------------
--------------- ---------
---------------------- - -- -- -
-- --------------- --- -- -
-- ----------- --- ---- -
-- --------
--------------------------
- ---- -
-- --------
-----------------------
-
-
--
-----------
---
-------------
------ -- -
-- ------
--------------------
--
----- -- -
-- ------
-------------------
-
--意义
Promise 通过将异步操作分解成三个状态，让开发者能够更加灵活的处理异步操作。Promise 实现了链式调用，让代码更加清晰易懂。Promise 对象本身是不可变的，解决了回调地狱问题。
async/await
async/await 是 ES2017 新添加的异步操作处理方式，它本质上是基于 Promise 的语法糖。通过 async/await 可以让异步代码看起来像同步代码。async 表示函数返回一个 Promise 对象，await 表示在异步操作执行完成之前等待。async/await 让开发者能够更加方便地处理异步操作。
用法
下面是 async/await 的基本用法。
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- -------- - ----- ---------------
----- ------ - ----- ----------------
--------------------
- ----- ------- -
-------------------
-
-
----------意义
async/await 是 Promise 的语法糖，让异步操作代码看起来更加简洁易懂。与 Promise 相比，async/await 更加直观，可以方便地进行错误处理。使用 async/await 替代 Promise 可以简化代码。
Promise 和 async/await 的区别
虽然 Promise 和 async/await 都是用于处理异步操作的方式，但是它们之间存在一些区别。
写法区别
Promise 和 async/await 的写法区别较大。Promise 代码比较分散，需要多次嵌套，而 async/await 代码结构清晰，易于阅读。
错误处理
Promise 的错误处理比较麻烦，需要在 then 和 catch 中指定不同的回调函数。而 async/await 可以通过 try/catch 进行错误处理，更加直观。
性能
使用 async/await 相比 Promise 可以减少 CPU 负载和内存压力。async/await 使用生成器函数和 Promise 对象组合实现，相比 Promise 直接使用回调函数可以减少对象的创建和回收，从而提高性能。
总结
Promise 和 async/await 用于处理异步操作，它们之间有着一些区别。Promise 使用嵌套回调函数来处理操作，代码分散；而 async/await 具有更好的可读性和更清晰的代码结构，使用 try/catch 来处理错误。在性能方面，async/await 也比 Promise 更加高效。在实际开发中，开发者可以根据实际情况选择使用 Promise 或 async/await，从而更好地处理异步操作。
示例代码
下面是一个使用 Promise 的示例代码。
-- -------------------- ---- -------
-------- --------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- ---------
---------------------- - -- -- -
-- --------------- --- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
-----------------------
-
-
--
-----------
---
-
---------
------------ -- -
--------------------
--
------------ -- -
-------------------
---下面是一个使用 async/await 的示例代码。
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- -------- - ----- ---------------
----- ------ - ----- ----------------
--------------------
- ----- ------- -
-------------------
-
-
----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d7b4d48841e9894bc6f92