在前端开发中，我们常常需要进行一些异步操作，例如发起网络请求、操作 DOM 等。在过去，我们使用回调函数来处理异步操作，但这种方法很容易导致回调地狱，使代码难以理解和维护。Promise 是一种解决这一问题的新方法。本文将介绍 Promise 的常用 API 及使用技巧，帮助你更好地理解和应用 Promise。
Promise 简介
Promise 是一种用于异步编程的规范，它可以让我们以一种更加可读和维护的方式处理异步操作。Promise 有三种状态：
- pending：初始状态，表示操作未完成；
- fulfilled：表示操作成功完成；
- rejected：表示操作失败。
当 Promise 状态从 pending 转变为 fulfilled 或 rejected 时，我们就称之为 Promise 已经 settled 了。Promise 对象通常会返回一个值，这个值在 fulfilled 或 rejected 状态下不一样。
Promise 常用 API
Promise.resolve 和 Promise.reject
Promise.resolve 方法返回一个用给定值解析后的 Promise 对象，Promise.reject 方法返回一个带有给定原因的 reject 状态的 Promise 对象。它们的用法如下所示：
// resolve 一个 Promise
const p1 = Promise.resolve("resolved");
// reject 一个 Promise
const p2 = Promise.reject("rejected");Promise.all 和 Promise.race
Promise.all 方法接受一个 Promise 数组作为参数，当数组中的所有 Promise 对象都 resolved 时，返回一个解析结果数组。如果其中一个 Promise 对象 rejected，则返回该 Promise 对象的错误。
Promise.race 方法也接受一个 Promise 数组作为参数，但它只要求数组中有一个 Promise 对象 settle（resolve 或 reject）就行了。返回该 Promise 对象的值或错误。
-- -------------------- ---- -------
----- -- - -------------------
----- -- - -------------------
----- -- - -------------------
---------------- --- ---------------- -- -
-------------------- -- --- -- --
---
----- -- - -------------------
----- -- - -------------------
----- -- - ---------------------------
----------------- --- ----------
----- -- -
------------------- -- -
--
------ -- -
-------------------- -- --------
-
--Promise.then 和 Promise.catch
Promise 对象有两个重要的方法：then 和 catch。then 用于处理 resolved 状态的回调函数，catch 用于处理 rejected 状态的回调函数。它们的用法如下所示：
-- -------------------- ---- ------- -- -------- -- ----- -- - --- ----------------- ------- -- - ----------------- -------- --- ------------- -- - ------------------- -- -------- ----- --- -- -------- -- ----- -- - --- ----------------- ------- -- - ---------------- --------- --- --------------- -- - -------------------- -- -------- ------ ---
Promise 使用技巧
使用 async/await
async/await 是 ES2017 中引入的两个新关键字，可以简化 Promise 的使用方式。async/await 实际上是基于 Promise 的，它们让异步代码看起来像同步代码，并且使得异常处理变得更加容易。
async 函数会返回一个 Promise 对象，这个对象会 resolve 为该函数的返回值，或 reject 为该函数抛出的异常。await 关键字只能使用在 async 函数内部，await 会等待其后面的 Promise 对象 settled，然后将该 Promise 对象 resolved 的值作为返回值。如果 Promise 对象 rejected，则会向外 throw 一个异常。
下面是一个使用 async/await 的例子：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
-------------------
-
-
------------Promise.prototype.finally
Promise.prototype.finally 方法接受一个回调函数作为参数，它不管 Promise 对象是 resolved 还是 rejected，都会执行该回调函数。
-- -------------------- ---- -------
----- -- - ----------------------------
--
----------- -- -
-------------------
--
------------- -- -
--------------------
--
----------- -- -
-----------------------
---总结
Promise 是一种用于异步编程的规范，可以让我们以一种更加可读和维护的方式处理异步操作。Promise 有三种状态：pending、fulfilled、rejected。Promise 对象通常会返回一个值，这个值在 fulfilled 或 rejected 状态下不一样。Promise 有很多常用的 API，例如 Promise.resolve、Promise.reject、Promise.all、Promise.race、Promise.then 和 Promise.catch。使用 async/await 可以让异步代码看起来像同步代码，并且使得异常处理变得更加容易。Promise.prototype.finally 方法可以在 Promise 对象 settle 之后执行指定操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649fe72a48841e9894c4236d