在前端开发中，异步操作是非常常见的，而 Promise 和 async/await 是两种常用的处理异步操作的方式。在 ES7 中，async/await 语句被引入，它是一种更加简单明了的处理异步操作的方式，但是与 Promise 相比，它们之间有哪些区别呢？
Promise 的基本使用方式
在介绍 async/await 语句之前，我们先来回顾一下 Promise 的基本使用方式。
Promise 是一种异步编程的解决方案，它可以将异步操作转化为同步操作的写法，从而避免了回调地狱的问题。
Promise 的基本语法如下：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ----
-- --- ------ --- -
----------------
- ---- -
--------------
-
---
--------------------- -- -
-- ----------
---------------- -- -
-- ----------
---Promise 的基本使用方式就是通过创建 Promise 对象来进行异步操作，然后使用 then 方法来处理异步操作成功后的结果，使用 catch 方法来处理异步操作失败后的结果。
async/await 语句的基本使用方式
async/await 语句是 ES7 中引入的一种处理异步操作的方式，它可以让异步操作的代码看起来更加简单明了。
async/await 语句的基本使用方式如下：
-- -------------------- ---- -------
----- -------- ------ -
--- -
----- ------ - ----- --------
-- ----------
- ----- ------- -
-- ----------
-
-
-------async/await 语句的基本使用方式就是将异步操作放在 async 函数中，然后使用 await 关键字来等待异步操作的结果，使用 try...catch 语句来处理异步操作成功或失败的结果。
async/await 语句和 Promise 的区别
虽然 async/await 语句和 Promise 都是处理异步操作的方式，但是它们之间还是有一些区别的。
1. 代码风格上的区别
async/await 语句可以让异步操作的代码看起来更加简单明了，而 Promise 的代码则比较冗长。
下面是一个使用 Promise 处理异步操作的代码：
-- -------------------- ---- -------
-------- --------- -
------ --- ----------------- ------- -- -
---------------------------
-------------- -- ----------------
---------- -- --------------
------------ -- ---------------
---
-
---------
---------- -- -
-- ----
--
------------ -- -
-- ----
---下面是一个使用 async/await 语句处理异步操作的代码：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- -------- - ----- ----------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
----- ------
-
-
--- -
----- ---- - ----- ----------
-- ----
- ----- ------- -
-- ----
-可以看到，使用 async/await 语句处理异步操作的代码比使用 Promise 处理异步操作的代码要简单明了。
2. 异常处理上的区别
在 Promise 中，使用 catch 方法来处理异步操作失败后的结果，而在 async/await 语句中，可以使用 try...catch 语句来处理异步操作失败后的结果。
下面是一个使用 Promise 处理异步操作失败的代码：
-- -------------------- ---- -------
-------- --------- -
------ --- ----------------- ------- -- -
---------------------------
-------------- -- ----------------
---------- -- --------------
------------ -- ---------------
---
-
---------
---------- -- -
-- ----
--
------------ -- -
-- ----
---下面是一个使用 async/await 语句处理异步操作失败的代码：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- -------- - ----- ----------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
----- ------
-
-
--- -
----- ---- - ----- ----------
-- ----
- ----- ------- -
-- ----
-可以看到，使用 async/await 语句处理异步操作失败的代码比使用 Promise 处理异步操作失败的代码要更加简洁。
总结
async/await 语句是 ES7 中引入的一种处理异步操作的方式，它可以让异步操作的代码看起来更加简单明了。虽然 async/await 语句和 Promise 都是处理异步操作的方式，但是它们之间还是有一些区别的。在代码风格和异常处理上，async/await 语句都比 Promise 更加简洁明了。在实际编程中，可以根据具体的情况来选择使用 async/await 语句还是 Promise。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65530e89d2f5e1655dcbe910