异步编程简介
在前端开发中，我们经常需要处理异步操作，例如发送 AJAX 请求、读取本地存储、执行定时任务等等。异步操作与同步操作的不同点在于，异步操作需要在后台执行，并且不会阻塞主线程，使得程序可以同时执行多个任务，提高了程序的性能。
然而，异步编程也带来了一些挑战。异步操作的结果不是立即可用的，需要等待异步操作完成后才能继续执行下一步操作。在传统的回调函数中，这种异步操作的嵌套会导致代码难以维护和理解。因此，ES6 中引入了 Promise 和 async/await 异步编程模式，使异步编程更加简洁、易读和易维护。
Promise
Promise 是 ES6 中引入的一种异步编程模式。它通过链式调用的方式，解决了回调函数嵌套的问题，使得异步代码更加清晰易读。
Promise 的基本使用
Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当一个 Promise 被创建时，它处于 pending 状态。当 Promise 成功完成时，它会进入 fulfilled 状态，并将结果传递给 then() 方法；当 Promise 失败时，它会进入 rejected 状态，并将错误传递给 catch() 方法。
下面是一个简单的 Promise 示例，模拟了一个异步操作：
----- ------- - --- ----------------- ------- -- -
------------- -- -
----- ------ - --------------
-- ------- - ---- -
----------------
- ---- -
---------- -----------------
-
-- ------
---
--------------------- -- -
----------------------- ------------
---------------- -- -
---------------------- -----------
---在这个示例中，我们创建了一个 Promise，模拟了一个 1 秒钟后返回随机数的异步操作。如果随机数大于 0.5，则 Promise 进入 fulfilled 状态，并将随机数传递给 then() 方法；否则，Promise 进入 rejected 状态，并将错误传递给 catch() 方法。
Promise 的进阶使用
除了基本的 Promise 使用方式外，ES6 还提供了一些高级的 Promise 方法，例如 Promise.all() 和 Promise.race()。
Promise.all()
Promise.all() 方法接收一个 Promise 数组作为参数，返回一个新的 Promise，当所有的 Promise 都成功完成时，它才会进入 fulfilled 状态；当任意一个 Promise 失败时，它就会进入 rejected 状态。如果 Promise 数组中有一个或多个 Promise 失败，Promise.all() 方法返回的 Promise 就会立即进入 rejected 状态，并将第一个失败的 Promise 的错误传递给 catch() 方法。
下面是一个使用 Promise.all() 的示例，模拟了同时发送多个 AJAX 请求的情况：
----- ---- - ---------------------------------------- --------------------------------------- ---------------------------------------- ----- -------- - -------------- -- - ------ -------------------------- -- ----------------- --- ------------------------------------ -- - --------------------- ---------------- -- - --------------------- ---
在这个示例中，我们定义了一个包含三个 URL 的数组，然后使用 fetch() 方法发送 AJAX 请求，并将结果解析为 JSON 格式。使用 Promise.all() 方法，我们可以同时发送这三个请求，并在所有请求都成功完成后，打印出结果数组。
Promise.race()
Promise.race() 方法和 Promise.all() 方法类似，也接收一个 Promise 数组作为参数，返回一个新的 Promise。不同的是，Promise.race() 方法只要有一个 Promise 成功完成或失败，它就会进入对应的状态，并将结果或错误传递给 then() 或 catch() 方法。
下面是一个使用 Promise.race() 的示例，模拟了一个超时请求的情况：
----- ------- - --- ----------------- ------- -- -
------------- -- -
---------- ------------------
-- ------
---
----- ------- - --- ----------------- ------- -- -
------------- -- -
---------- -------------- -- ------ --- --------
-- ------
---
---------------------- ----------------------- -- -
--------------------
---------------- -- -
---------------------
---在这个示例中，我们创建了一个 Promise，模拟了一个 5 秒钟后返回结果的异步操作。同时，我们还创建了一个超时 Promise，模拟了一个 3 秒钟后请求超时的情况。使用 Promise.race() 方法，我们可以同时执行这两个 Promise，并在其中一个 Promise 成功完成或失败后，打印出结果或错误信息。
async/await
async/await 是 ES8 中引入的一种异步编程模式。它基于 Promise，使用 async 和 await 关键字，使异步代码更加简洁、易读和易维护。
async/await 的基本使用
async/await 基于 Promise，可以将 Promise 的链式调用转换为类似同步代码的形式。在 async 函数中，我们可以使用 await 关键字等待 Promise 完成，并将结果赋值给变量，这样我们就可以像处理同步代码一样处理异步代码了。
下面是一个简单的 async/await 示例，模拟了一个异步操作：
----- -------- --------- -
----- ------- - --- ----------------- ------- -- -
------------- -- -
----- ------ - --------------
-- ------- - ---- -
----------------
- ---- -
---------- -----------------
-
-- ------
---
--- -
----- ------ - ----- --------
----------------------- ------------
- ----- ------- -
---------------------- -----------
-
-
----------在这个示例中，我们定义了一个 async 函数 getData()，在其中创建了一个 Promise，模拟了一个 1 秒钟后返回随机数的异步操作。使用 await 关键字，我们可以等待 Promise 完成，并将结果赋值给变量 result。如果 Promise 成功完成，则打印出成功的信息；否则，打印出失败的信息。
async/await 的进阶使用
除了基本的 async/await 使用方式外，ES8 还提供了一些高级的 async/await 方法，例如 Promise.all() 和 Promise.race()。
Promise.all()
在 async/await 中使用 Promise.all() 方法，可以等待多个 Promise 完成，并将结果作为一个数组返回。与 Promise.all() 方法类似，当其中一个 Promise 失败时，整个 async 函数就会进入 rejected 状态，并将第一个失败的 Promise 的错误传递给 catch() 方法。
下面是一个使用 Promise.all() 的示例，模拟了同时发送多个 AJAX 请求的情况：
----- -------- --------- -
----- ---- - ---------------------------------------- --------------------------------------- ----------------------------------------
----- -------- - -------------- -- -
------ -------------------------- -- -----------------
---
--- -
----- ------- - ----- ----------------------
---------------------
- ----- ------- -
---------------------
-
-
----------在这个示例中，我们定义了一个 async 函数 getData()，在其中定义了一个包含三个 URL 的数组。使用 fetch() 方法发送 AJAX 请求，并将结果解析为 JSON 格式。使用 Promise.all() 方法，我们可以等待这三个请求都完成，并将结果作为一个数组返回。
Promise.race()
在 async/await 中使用 Promise.race() 方法，可以等待多个 Promise 中的第一个完成，并将结果或错误信息作为返回值。与 Promise.race() 方法类似，当其中一个 Promise 失败时，整个 async 函数就会进入 rejected 状态，并将第一个失败的 Promise 的错误传递给 catch() 方法。
下面是一个使用 Promise.race() 的示例，模拟了一个超时请求的情况：
----- -------- --------- -
----- ------- - --- ----------------- ------- -- -
------------- -- -
---------- ------------------
-- ------
---
----- ------- - --- ----------------- ------- -- -
------------- -- -
---------- -------------- -- ------ --- --------
-- ------
---
--- -
----- ------ - ----- ---------------------- ----------
--------------------
- ----- ------- -
---------------------
-
-
----------在这个示例中，我们定义了一个 async 函数 getData()，在其中创建了一个 Promise，模拟了一个 5 秒钟后返回结果的异步操作。同时，我们还创建了一个超时 Promise，模拟了一个 3 秒钟后请求超时的情况。使用 Promise.race() 方法，我们可以等待这两个 Promise 中的第一个完成，并将结果或错误信息作为返回值。
总结
在本文中，我们介绍了 ES6 中的 Promise 和 ES8 中的 async/await 两种异步编程模式。它们都可以使异步代码更加简洁、易读和易维护。Promise 通过链式调用的方式解决了回调函数嵌套的问题，使得异步代码更加清晰易读；async/await 基于 Promise，使用 async 和 await 关键字，使异步代码更加类似同步代码的形式，使得异步代码更加易于编写和理解。
在实际开发中，我们可以根据具体情况选择使用 Promise 或 async/await。当需要等待多个异步操作完成时，可以使用 Promise.all() 或 async/await；当需要等待多个异步操作中的第一个完成时，可以使用 Promise.race() 或 async/await。无论是哪种方式，都可以使我们的异步代码更加清晰、易读和易维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/655d797cd2f5e1655d7bf9e2