JavaScript 是一种单线程语言，意味着在执行代码时只能进行一项任务。这在处理异步操作时可能导致问题，因为大多数异步操作都需要等待一段时间才能完成。ES6 引入了 Promise 和 Async/Await，这两个功能都可以帮助解决 JavaScript 异步编程所面临的问题。
Promise
Promise 是一种异步编程的解决方案，它可以将异步操作转换成同步操作。Promise 一般用于处理需要等待一段时间才能完成的操作，例如网络请求和文件读取。Promise 有三种状态：pending（进行中）、fulfilled（已完成）和 rejected（已拒绝）。
Promise 的基本用法
Promise 构造函数接受一个函数作为参数，该函数接受两个参数：resolve 和 reject。resolve 用于将 Promise 状态从 pending 转变为 fulfilled，reject 用于将 Promise 状态从 pending 转变为 rejected。
----- ------- - --- ----------------- ------- -- -
-- ----
------------- -- -
---------------- -----------
-- ------
---
--------------------- -- -
--------------------
---------------- -- -
---------------------
---上述代码创建了一个 Promise，该 Promise 在 1 秒钟后将状态从 pending 转变为 fulfilled，并输出 'Promise resolved'。如果 Promise 状态从 pending 转变为 rejected，则会输出错误信息。
Promise 的链式调用
Promise 可以链式调用，这样可以让代码更加简洁和易于维护。每个 then 都返回一个新的 Promise，因此可以在 then 中执行异步操作，并使用链式调用将其结果传递给下一个 then。
----- ------- - --- ----------------- ------- -- -
-- ----
------------- -- -
---------------- -----------
-- ------
---
--------------------- -- -
--------------------
------ --- ----------------- ------- -- -
-- ----
------------- -- -
--------------- ------- -----------
-- ------
---
---------------- -- -
--------------------
---------------- -- -
---------------------
---上述代码创建了两个 Promise，第一个 Promise 在 1 秒钟后将状态从 pending 转变为 fulfilled，并输出 'Promise resolved'。第二个 Promise 在第一个 Promise 的 then 中执行，2 秒钟后将状态从 pending 转变为 fulfilled，并输出 'Second promise resolved'。
Promise.all 和 Promise.race
Promise.all 和 Promise.race 是 Promise 的两个静态方法。Promise.all 接受一个 Promise 数组作为参数，返回一个新的 Promise，该 Promise 将在所有 Promise 都成功时成功，否则将失败。Promise.race 接受一个 Promise 数组作为参数，返回一个新的 Promise，该 Promise 将在任何一个 Promise 成功或失败时成功或失败。
----- -------- - --- ----------------- ------- -- -
-- ----
------------- -- -
---------------- - -----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
-- ----
------------- -- -
---------------- - -----------
-- ------
---
---------------------- ------------------------- -- -
--------------------- -- --------- - ---------- -------- - ----------
---------------- -- -
---------------------
---
----------------------- ------------------------ -- -
-------------------- -- -------- - ---------
---------------- -- -
---------------------
---上述代码创建了两个 Promise，第一个 Promise 在 1 秒钟后将状态从 pending 转变为 fulfilled，并输出 'Promise 1 resolved'。第二个 Promise 在 2 秒钟后将状态从 pending 转变为 fulfilled，并输出 'Promise 2 resolved'。使用 Promise.all 将这两个 Promise 合并为一个，输出 ['Promise 1 resolved', 'Promise 2 resolved']。使用 Promise.race 将这两个 Promise 合并为一个，输出 'Promise 1 resolved'，因为它是第一个完成的 Promise。
Async/Await
Async/Await 是 ES8 中的新功能，它可以让异步代码看起来像同步代码。Async/Await 是基于 Promise 实现的，它简化了 Promise 的使用方式。
Async/Await 的基本用法
async 关键字用于声明一个异步函数，异步函数返回一个 Promise。await 关键字用于等待一个 Promise 完成，然后返回该 Promise 的结果。使用 async/await 可以让异步代码看起来像同步代码，这使得代码更加易于阅读和维护。
----- -------- --------------- -
----- ------- - --- ----------------- ------- -- -
-- ----
------------- -- -
---------------- -----------
-- ------
---
----- ------ - ----- --------
--------------------
-
----------------上述代码创建了一个异步函数 asyncFunction，在该函数中创建一个 Promise，在 1 秒钟后将状态从 pending 转变为 fulfilled，并输出 'Promise resolved'。
Async/Await 的错误处理
使用 try/catch 可以捕获异步函数中的错误。如果异步函数中的 Promise 被拒绝，则会抛出一个错误，并在 catch 中捕获该错误。
----- -------- --------------- -
--- -
----- ------- - --- ----------------- ------- -- -
-- ----
------------- -- -
---------- -------------- ------------
-- ------
---
----- ------ - ----- --------
--------------------
- ----- ------- -
---------------------
-
-
----------------上述代码创建了一个异步函数 asyncFunction，在该函数中创建一个 Promise，在 1 秒钟后将状态从 pending 转变为 rejected，并抛出一个错误，输出错误信息。
Async/Await 的串行执行
使用 async/await 可以让异步代码看起来像同步代码，这使得代码更加易于阅读和维护。使用 async/await 可以使异步操作按顺序执行，这在处理需要等待前一个操作完成才能进行下一个操作的情况下非常有用。
----- -------- --------------- -
----- -------- - --- ----------------- ------- -- -
-- ----
------------- -- -
---------------- - -----------
-- ------
---
----- ------- - ----- ---------
---------------------
----- -------- - --- ----------------- ------- -- -
-- ----
------------- -- -
---------------- - -----------
-- ------
---
----- ------- - ----- ---------
---------------------
-
----------------上述代码创建了一个异步函数 asyncFunction，在该函数中创建两个 Promise，第一个 Promise 在 1 秒钟后将状态从 pending 转变为 fulfilled，并输出 'Promise 1 resolved'。第二个 Promise 在第一个 Promise 的后面执行，1 秒钟后将状态从 pending 转变为 fulfilled，并输出 'Promise 2 resolved'。
总结
Promise 和 Async/Await 都是解决 JavaScript 异步编程问题的有效方法。Promise 是一种异步编程的解决方案，它可以将异步操作转换成同步操作。Async/Await 是 ES8 中的新功能，它可以让异步代码看起来像同步代码。使用 Promise 和 Async/Await 可以使异步操作按顺序执行，这在处理需要等待前一个操作完成才能进行下一个操作的情况下非常有用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65deb8461886fbafa4bfa951