在前端开发中，我们经常会遇到需要异步执行的任务，比如发送网络请求、读取本地文件等等。而在 JavaScript 中，异步任务通常通过回调函数来处理。但是，回调函数嵌套过多的情况下，代码可读性和可维护性都会变得很差。为了解决这个问题，ES6 引入了 Promise 和 async/await 两种语法，可以更优雅地处理异步任务。
Promise
Promise 是一种处理异步任务的方式，它可以将异步操作包装成一个对象，从而使得代码更易于理解和维护。Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当异步操作完成时，Promise 对象的状态会从 pending 变为 fulfilled 或 rejected，同时会调用相应的回调函数。
下面是一个使用 Promise 的例子，假设我们需要从服务器上获取一张图片：
-------- -------------- -
------ --- ------------------------- ------- -
--- ----- - --- --------
------------ - ---------- -
---------------
--
------------- - ---------- -
---------- ------------ --- ---- ----- -- - - ------
--
--------- - ----
---
-
--------------------------------------------------------------- -
---------------------------------
------------------------ -
---------------------
---在这个例子中，loadImage 函数返回一个 Promise 对象，该对象包装了异步加载图片的操作。当图片加载完成时，Promise 对象的状态会变为 fulfilled，并调用 then 方法中的回调函数；如果加载失败，则状态会变为 rejected，并调用 catch 方法中的回调函数。
async/await
async/await 是 ES8 中引入的语法，它是基于 Promise 的语法糖，可以更方便地处理异步任务。async/await 的作用是让异步代码看起来像同步代码，从而提高代码的可读性和可维护性。
下面是一个使用 async/await 的例子，假设我们需要从服务器上获取一组数据：
----- -------- -------------- -
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-
-------------------------------------------------------------- -
------------------
---在这个例子中，fetchData 函数返回一个 Promise 对象，该对象包装了异步获取数据的操作。在函数体内部，我们使用了 async 和 await 关键字，分别表示该函数是异步函数，以及需要等待 Promise 对象的状态变为 fulfilled 才能继续执行后面的代码。当 Promise 对象的状态变为 rejected 时，会抛出异常并被 catch 语句捕获。
改写回调风格的代码
下面是一个使用回调函数的例子，假设我们需要读取本地文件并显示在页面上：
-------- ------------------ --------- -
--- --- - --- -----------------
--------------- --------- ------
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
-------------- ------------------
- ---- -
------------ ---------------------- ------
-
-
--
----------- - ---------- -
------------ -------------- -------- ------
--
-----------
-
-------------------- --------------- ----- -
-- ------- -
---------------------
- ---- -
------------------------- - -----
-
---在这个例子中，readFile 函数使用了回调函数来处理异步操作。当文件读取成功时，调用 callback 函数并将数据作为参数传递；当文件读取失败时，调用 callback 函数并将错误信息作为参数传递。
我们可以使用 Promise 或 async/await 来改写这段代码。下面是使用 Promise 的例子：
-------- ------------------ -
------ --- ------------------------- ------- -
--- --- - --- -----------------
--------------- --------- ------
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
---------- -----------------------
-
-
--
----------- - ---------- -
---------- -------------- ---------
--
-----------
---
-
---------------------------------------- -
------------------------- - -----
------------------------ -
---------------------
---在这个例子中，readFile 函数返回一个 Promise 对象，该对象包装了异步读取文件的操作。当文件读取成功时，Promise 对象的状态会变为 fulfilled，并调用 then 方法中的回调函数；当文件读取失败时，状态会变为 rejected，并调用 catch 方法中的回调函数。
下面是使用 async/await 的例子：
----- -------- ------------------ -
--- -
----- -------- - ----- ----------------
------ ----------------
- ----- ------- -
---------------------
-
-
---------------------------------------- -
------------------------- - -----
---在这个例子中，readFile 函数使用了 async/await 关键字，让异步代码看起来像同步代码。在函数体内部，我们使用了 fetch 函数来获取文件内容，然后使用 await 等待 Promise 对象的状态变为 fulfilled。当 Promise 对象的状态变为 rejected 时，会抛出异常并被 catch 语句捕获。
总结
Promise 和 async/await 是处理异步任务的两种常用方式。它们可以将异步操作包装成一个对象，并提供更优雅的语法来处理异步任务。使用 Promise 和 async/await 可以让代码更易于理解和维护，同时提高开发效率。在实际开发中，我们应该根据具体情况选择合适的方式来处理异步任务。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6577f7f9d2f5e1655d1c6a12