如果你是一名前端开发者，你一定已经接触过 Promise 和 await，两者都是用于解决 JS 异步编程中回调地狱问题的重要工具。但是，正确地使用 Promise 和 await 可能并不容易。这篇文章将详细介绍 Promise 和 await，以及如何在 JS 中使用它们。
Promise
Promise 是一种 JS 异步编程的解决方案，它可以将异步操作以同步代码的形式表达出来，从而避免了回调地狱。Promise 的基本概念很简单，它表示一个异步操作的最终完成（或失败）及其结果值。
一个 Promise 可以有以下三种状态：
- pending：Promise 对象创建时的初始状态。
- fulfilled：异步操作成功完成且其结果值已经返回，此时 Promise 的状态变为 fulfilled。
- rejected：异步操作失败，此时 Promise 的状态变为 rejected。
创建 Promise
Promise 是通过构造函数来创建的，构造函数接收一个函数作为参数，这个函数即为 executor 函数。executor 函数有两个参数，分别为 resolve 和 reject，我们使用它们来表示异步操作的成功和失败状态。
下面是一个简单的 Promise 的例子：
const myPromise = new Promise((resolve, reject) => {
const randomNum = Math.random()
if (randomNum > 0.5) {
resolve(randomNum)
} else {
reject('Error: random number is less than 0.5')
}
})以上代码中，我们使用了 Math.random() 来生成一个随机数，如果该随机数大于 0.5，我们就将其作为 Promise 的结果通过 resolve 返回，否则我们通过 reject 返回一个错误信息。
Promise 的链式调用
一个 Promise 可以链式调用多个 then 方法来处理异步操作的结果。then 方法接收两个参数，分别为成功和失败的回调函数。
以下是一个 Promise 链式调用的例子：
-- -------------------- ---- -------
----- --------- - --- ----------------- ------- -- -
----- --------- - -------------
-- ---------- - ---- -
------------------
- ---- -
-------------- ------ ------ -- ---- ---- -----
-
--
---------------
-------- -- -------------------- --------- ---- ------- ------------
------- -- -------------------- -------- ---- ------ ----------
-在以上代码中，我们首先创建了一个 Promise，然后使用 then 方法来处理该 Promise 的结果。如果 Promise 成功，我们将其结果通过第一个回调函数输出，否则我们将错误信息通过第二个回调函数输出。
Promise.all()
Promise.all() 方法接收一个 Promise 数组作为参数，它将在所有 Promise 都成功完成后，返回一个包含所有 Promise 结果的数组。如果其中任何一个 Promise 失败，Promise.all() 将直接失败并返回一个错误信息。
以下是一个 Promise.all() 的例子：
const promise1 = Promise.resolve(1)
const promise2 = Promise.resolve(2)
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 100, 3))
Promise.all([promise1, promise2, promise3]).then((result) =>
console.log(`Promise.all fulfilled with result: ${result}`)
)以上代码中，我们创建了三个 Promise，分别返回数字 1、2 和 3。我们使用 Promise.all() 方法来等待这三个 Promise 都完成，并将它们的结果放在一个数组中输出。
await
await 是 ES7 中新引入的异步操作符，它只能在 async 函数中使用。await 后面必须是一个 Promise，否则它将自动转换为一个立即 resolve 的 Promise。await 可以等待 Promise 对象中的结果，并将其解析为一个普通的值。
下面是一个使用 await 的例子：
async function getResult() {
const result = await new Promise((resolve) => setTimeout(resolve, 100, 'result'))
console.log(`Result from promise: ${result}`)
}
getResult()在以上代码中，我们定义了一个 getResult 函数，并在其中使用 await 等待一个 Promise。当该 Promise 成功完成后，我们将其结果解析为一个普通的值，并使用 console.log() 输出该值。
如何正确地使用 Promise 和 await
在使用 Promise 和 await 时，需要遵循以下几点：
- Promise 是异步执行的，同时它也是一个有状态的对象。一旦 Promise 状态被改变，它将永远保持这个状态，不会被改变。
- Promise 的状态一旦被改变，它将不再接受新的状态改变。在 Promise 的 executor 函数中，不应该使用 setTimeout、setInterval 和 XMLHttpRequest 等函数，因为它们都可以导致 Promise 的状态改变。
- Promise 有两个重要的方法：then() 和 catch()。then() 方法用于处理 Promise 成功时的结果，catch() 方法用于处理 Promise 失败时的结果。在链式调用中，如果使用多个 then()，应该保证每个 then() 都返回一个 Promise，否则它们将直接返回上一个 then() 的结果。
- await 可以等待任何 Promise 对象，并将其结果解析成一个普通的值。但是使用 await 时需要注意，必须在一个 async 函数中使用，并且必须等待结果的 Promise 对象一定会成功返回一个结果。如果结果失败，async 函数将停止执行，并且抛出一个错误。
下面是一个使用 Promise 和 await 的例子：
-- -------------------- ---- -------
----- --------- - -- -- --- ----------------- -- ------------------- ----- ----------
----- -------- ----------- -
--- -
----- ------ - ----- -----------
------------------- ---- -------- -----------
- ----- ------- -
------------------- ----------
-
-
-----------在以上代码中，我们先定义了一个返回 1 秒后返回 'result' 的 Promise，然后定义了一个 getResult 函数，并在其中使用 await 等待该 Promise 的结果。在使用 await 时，我们使用 try...catch... 语句来处理任何可能的错误。
结论
Promise 和 await 是 JS 异步编程中十分重要的工具，正确地使用它们可以避免回调地狱，并提高代码的可读性和可维护性。在使用 Promise 和 await 时，需要遵循一定的规则，并且在链式调用中保证每个 then() 都返回一个 Promise。最后，为了更深入地学习 Promise 和 await，我们可以多阅读一些相关的文档和资料，掌握其更多的用法和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6721c3ec2e7021665e08b1ad