Promise 是一个在 JavaScript 中很常用的异步编程解决方案，它可以帮助我们管理复杂的异步操作，让代码更加简洁和易于维护。本文将介绍 Promise 的基本用法、API 和一些常见应用场景。
Promise 基本用法
Promise 是一个类，它有三个状态：pending（进行中）、fulfilled（已完成）和 rejected（已失败）。我们可以通过 new Promise() 来创建一个 Promise 对象，该对象包含一个 executor 函数，该函数接受两个参数：resolve 和 reject，分别表示成功和失败的回调函数。
例如，我们可以通过以下代码创建一个 Promise 对象：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
----- ---- - --------------
-- ----- -- ---- -
-------------------
- ---- -
---------------
-
-- ------
---在上述代码中，我们通过 setTimeout 模拟了一个异步操作，并在回调函数中使用 resolve 或 reject 来表示操作的结果。当异步操作完成后，Promise 对象的状态会变成 fulfilled 或 rejected，并且执行相应的回调函数。
我们可以通过 then 方法来注册成功的回调函数，通过 catch 方法来注册失败的回调函数。例如，我们可以按照以下方式注册回调函数：
promise.then(res => {
console.log(res);
}).catch(err => {
console.error(err);
});在上述代码中，当 Promise 对象的状态变为 fulfilled 时，调用 then 方法中的回调函数，并且将结果传递给该函数。当 Promise 对象的状态变为 rejected 时，调用 catch 方法中的回调函数，并且将错误信息传递给该函数。
Promise API
除了基本的创建和使用 Promise 对象之外，ES6 还提供了一些 Promise 相关的 API，例如：
- Promise.resolve(value): 返回一个 Promise 对象，状态为
fulfilled，并传递给它的参数作为结果值； - Promise.reject(reason): 返回一个 Promise 对象，状态为
rejected，并传递给它的参数作为错误信息； - Promise.all(iterable): 接受一个可迭代对象（例如数组）作为参数，返回一个 Promise 对象。当所有的 Promise 对象状态都变为
fulfilled时，该 Promise 对象的状态为fulfilled，并返回一个包含所有 Promise 对象结果值的数组。当任意一个 Promise 对象状态变为rejected时，该 Promise 对象的状态为rejected，并返回第一个被拒绝的 Promise 对象的错误信息； - Promise.race(iterable): 接受一个可迭代对象作为参数，返回一个 Promise 对象。当任意一个 Promise 对象状态变为
fulfilled或rejected时，该 Promise 对象的状态为相应的状态，并返回第一个发生状态变化的 Promise 对象的结果或错误信息。
例如，下面是如何使用 Promise.all 方法：
const promise1 = new Promise(resolve => setTimeout(() => resolve(1), 1000));
const promise2 = new Promise(resolve => setTimeout(() => resolve(2), 2000));
const promise3 = new Promise(resolve => setTimeout(() => resolve(3), 3000));
const promises = [promise1, promise2, promise3];
Promise.all(promises).then(res => {
console.log(res); // [1, 2, 3]
});在上述代码中，我们创建了三个异步操作的 Promise 对象，分别为 1 秒、2 秒和 3 秒分别返回相应的结果。最后，使用 Promise.all 方法等待三个异步操作的结果，并使用 then 方法打印所有结果。
应用场景
Promise 可以处理很多复杂的异步编程问题，例如：
串行执行多个异步操作
在某些情况下，我们需要依次执行多个异步操作，并在所有操作完成之后进行下一步操作。例如，我们需要分别获取用户信息、订单信息和购物车信息，并在所有信息获取完成之后更新页面。
使用 Promise 可以轻松解决这个问题。我们可以按照以下方式创建三个异步操作的 Promise 对象，并依次调用它们：
-- -------------------- ---- -------
---------------------------------- -- -
------ ---------------------------------
----------------- -- -
------ -------------------------------------
---------------- -- -
-------------------- ---------- ----------
------------ -- -
-------------------
---在上述代码中，我们依次调用了三个异步操作函数，并使用 then 方法将每个函数的结果传递给下一个函数。如果任意一个异步操作失败，我们将会调用 catch 方法中的回调函数，并打印错误信息。
并行执行多个异步操作
在某些情况下，我们需要同时执行多个异步操作，并在所有操作完成之后进行下一步操作。例如，我们需要分别获取多个商品的详细信息，并在所有信息获取完成之后展示它们。
使用 Promise.all 可以轻松解决这个问题。我们可以按照以下方式创建每个异步操作的 Promise 对象，并将它们放入一个数组中，然后使用 Promise.all 等待所有异步操作完成：
const promises = [fetchProductInfo(1), fetchProductInfo(2), fetchProductInfo(3)];
Promise.all(promises).then(productInfos => {
renderProducts(productInfos);
}).catch(err => {
console.error(err);
});在上述代码中，我们使用 fetchProductInfo 函数分别获取三个商品的信息，然后使用 Promise.all 方法等待所有信息获取完成，并将结果传递给 renderProducts 函数。如果任意一个异步操作失败，我们将会调用 catch 方法中的回调函数，并打印错误信息。
结论
在 JavaScript 中，Promise 是一种非常有价值的异步编程解决方案。它可以帮助我们管理复杂的异步操作，让代码更加简洁和易于维护。通过本文的介绍，我们可以学习其基本用法、API 和常见应用场景，从而更好地应用 Promise 解决实际问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6709d4f0d91dce0dc87c3746