Promise 和 async/await 是 JavaScript 中用于处理异步操作的两种常用方式。它们的出现极大地简化了异步编程的难度，同时也提高了代码的可读性和可维护性。本文将详细介绍 Promise 和 async/await 的使用方法，并给出一些具体实例以帮助读者更好地掌握这两种技术。
Promise
Promise 是一种使用链式调用的异步编程技术，它可以用于处理原本需要回调函数的异步操作，使代码更加简洁，清晰易懂。一个 Promise 对象包含以下三个状态：
- pending（异步操作尚未完成）；
- fulfilled（异步操作完成且执行成功）；
- rejected（异步操作完成但执行失败）。
我们使用 Promise 时，常常会构建一个返回 Promise 对象的函数，例如：
function fetchData() {
return new Promise((resolve, reject) => {
// 执行异步操作
// 成功时执行 resolve 函数，传入结果
// 失败时执行 reject 函数，传入错误信息
});
}我们可以通过 then 方法来注册成功回调函数，通过 catch 方法来注册失败回调函数，并且我们可以通过一条链式调用串联多个处理逻辑：
-- -------------------- ---- -------
-----------
------------ -- -
-- ----
------ ----------------------
--
--------------------- -- -
-- --------
--
------------ -- -
-- ------
---下面是一个完整的使用 Promise 实现异步操作的例子：
-- -------------------- ---- -------
-------- -------------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- -----
---------------------- - -- -- -
-- --------------- --- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
---------- -----------------------
-
-
--
-----------
---
-
------------------------------------
-------------- -- -
----------------------
--
------------ -- -
---------------------
---async/await
async/await 是 ES2017 引入的一种异步编程技术，它更进一步简化了异步编程的难度，使代码更加像同步代码，易于理解，同时也便于错误处理。使用 async/await，我们可以将异步操作看作是同步操作，使用 await 操作符等待异步操作的完成。
async 函数返回的是一个 Promise 对象。在 async 函数中，我们可以使用 await 操作符等待一个 Promise 对象的完成，并将其结果赋给一个变量。在等待 Promise 对象的完成时，async 函数的执行会暂停，直到 Promise 对象完成。
下面是一个简单的例子：
-- -------------------- ---- -------
----- -------- -------------- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
-
------------------------------------
---------- -- -
------------------
--
------------ -- -
---------------------
---注意，我们必须将 async 函数的调用放在 Promise 中来获取函数的返回值。
我们还可以使用 try...catch 块来处理 Promise 异常，如下所示：
-- -------------------- ---- -------
----- -------- -------------- -
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-下面是使用 async/await 获取当前位置的完整例子：
-- -------------------- ---- -------
-------- ------------- -
------ --- ----------------- ------- -- -
-- ----------------------- -
------------------------------------------------- --------
- ---- -
---------- ------------------ -- --- --------- -- ---- ------------
-
---
-
----- -------- ------------ -
--- -
----- -------- - ----- --------------
----- - --------- --------- - - ----------------
----- -------- - ----- -----------------------------------------------------------------------------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-
------------
---------- -- -
------------------
--
------------ -- -
---------------------
---在这个例子中，我们首先定义了一个返回 Promise 对象的函数 getPosition，这个函数可以异步获取当前位置。然后，我们定义了一个使用 async/await 的函数 getWeather，它首先等待 getPosition 函数的完成，然后使用获取到的坐标异步获取天气信息，并返回结果。最后，我们调用 getWeather 函数来获取当前位置的天气信息。
总结
Promise 和 async/await 都是用于处理异步操作的重要技术。Promise 基于链式调用，使异步操作的处理更加清晰。async/await 则使异步操作的处理更加简单和易于理解。在具体实现中，需要注意避免 callback hell，及时处理异常信息并保持代码的可读性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dff83df6b2d6eab3b1df06