Promise 的执行顺序：then()、catch()、finally()
在前端开发中，异步操作是经常用到的，ES6 引入了 Promise，让异步操作更加简单和方便。在使用 Promise 的过程中，我们需要注意 then()、catch()、finally() 这三个方法的执行顺序，本文将详细讲述其执行顺序和使用技巧。
一、Promise 的基础语法
先介绍一下 Promise 的基础语法，以便更好地理解后面的讲解。Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当状态发生改变时，Promise 对象会触发相关事件。Promise 有两个参数：resolve 函数和 reject 函数，它们实现成功和失败的回调。例如：
--- ------- - --- ----------------- ------- -- -
-------- -
--------------
- ---- -
-------------
-
---上面这段代码中，如果条件为 true，就会执行 resolve 回调；否则，执行 reject 回调。
二、then()、catch()、finally() 的执行顺序
在 Promise 对象中，then()、catch()、finally() 的执行顺序是固定的。then() 和 catch() 是对 then(null, rejection) 的简写，因此 then() 和 catch() 可以通过链式调用来实现在 Promise 成功或失败时执行的回调。finally() 方法在 Promise 结束时无论是成功还是失败都会执行回调。示例代码如下：
-------------------- -- - -- ------ ---------------- -- - -- ------ ------------- -- - -- ---------------- ---
如果 Promise 执行成功，则 then() 方法会被调用；如果 Promise 执行失败，则 catch() 方法会被调用。finally() 方法则无论 Promise 执行成功或失败都会被调用。下面通过一个例子来说明这个顺序：
--- -------- - --- ----------------- ------- -- -
------------- -- -
---------------
-------------------------------------
-- ---
---
--------------------- -- -
-------------- -------
----- --------------
---------------- -- -
-------------- -------
------ --------------
------------------ -- -
-------------- -------
---输出结果如下：
--------------------- - --- - ----------- - ---------
从输出结果看，setTimeout 里的 resolve 方法先被执行了，然后执行了 then()，因为 then() 抛出了一个错误，所以会跳到 catch() 方法，然后 catch() 返回了一个值。最后，无论是 then() 还是 catch()，都会执行 finally() 方法。
三、Promise 的使用技巧
为了更好地使用 Promise，我们需要掌握一些技巧。
- Promise.all() 方法实现多个异步操作并发执行
Promise.all() 方法可以实现多个异步操作并发执行，例如：
-- ------------- -------------- ------------- -------------------- ------------------- ---------------- ------- -- - ------------------ ------- ---------------- -- - --------------------- ------- ---
- Promise.race() 方法实现多个异步操作竞争执行
Promise.race() 方法可以实现多个异步操作竞争执行，例如：
-- -------------- --------------
--------------
--------------------
--- ----------------- ------- -- -
------------- -- -
---------------
-- ------
--
-------------- -- -
------------------
---------------- -- -
--------------------- -------
---- Promise 的错误处理
在使用 Promise 的过程中，我们需要注意错误处理。错误处理要放在 catch() 方法中，例如：
--- -------- - --- ----------------- ------- -- -
------------- -- -
--------------
-- ------
---
---------------- -- -
------------------
---------------- -- -
----------------- -------
---在这里，我们把错误处理放在了 catch() 方法中。
四、总结
本文详细介绍了 Promise 的执行顺序和使用技巧。尤其是对 then()、catch()、finally() 的执行顺序进行了详细的讲解，希望读者能够掌握 Promise 的基本用法，使之在实际项目开发中更加得心应手。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/664530a0d3423812e4320e6a