Promise 中 then 和 catch 方法的执行顺序-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会使用到 Promise 这一技术来进行异步编程。而在 Promise 中，then 和 catch 方法是最基础、也是最常用的方法之一。但对于 then 和 catch 方法的执行顺序，可能会存在一些疑惑。本文将详细讲述 Promise 中 then 和 catch 方法的执行顺序，并给出一些示例代码。

Promise 简介

Promise 是一种解决异步编程中回调地狱问题的技术，它用来处理异步操作并返回一个 Promise 对象。Promise 对象有三种状态：Pending（等待态）、Fulfilled（成功态）和Rejected（失败态）。当 Promise 对象进入 Fulfilled 或 Rejected 状态时，就会调用相应的回调函数。

例如：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功");
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
});

上述代码表示在一秒钟后，Promise 对象将进入 Fulfilled 状态，并返回成功信息“成功”。于是将调用 then 方法的回调函数，并输出“成功”。

then 方法的执行顺序

then 方法用来指定 Promise 对象状态为 Fulfilled 时的回调函数。then 方法调用后，会根据 Promise 对象的状态来决定何时执行。

在 Promise 对象进入 Fulfilled 状态时，会调用 then 方法传入的回调函数，并且会将 Promise 对象的返回值传递给回调函数。then 方法也可以接收两个参数，第一个参数是 Promise 对象进入 Fulfilled 状态时的回调函数，第二个参数是 Promise 对象进入 Rejected 状态时的回调函数。

例如：

// javascriptcn.com 代码示例
const promise1 = Promise.resolve(1);

promise1.then((value) => {
  console.log(value);
  return value + 1;
}).then((value) => {
  console.log(value);
  return value + 1;
}).then((value) => {
  console.log(value);
});

上述代码表示，创建一个 Promise 对象，并将其状态设置为 Fulfilled，值为 1。之后，使用 then 方法来指定不同的回调函数，在每个回调函数中将值累加。程序的执行结果为：

1
2
3

这是因为在每个 then 方法中，返回的是一个新的 Promise 对象，所以可以使用链式调用来变换值。

catch 方法的执行顺序

catch 方法用来指定 Promise 对象状态为 Rejected 时的回调函数。catch 方法调用后，只要 Promise 对象状态为 Rejected，就会执行回调函数。

catch 方法也可以理解为 then(null, onRejected) 的别名。因为 catch 方法本质上就是 then 方法的一种简写，只是第一个回调函数为 null。

例如：

const promise2 = Promise.reject("失败");

promise2.catch((error) => {
  console.log(error);
}).then(() => {
  console.log("执行完毕");
});

上述代码表示，自定义一个 Promise 对象并将其状态设置为 Rejected，值为“失败”。使用 catch 方法来指定回调函数并输出“失败”信息。之后，无论该程序执行成功与否，都会执行 then 方法中的回调函数并输出“执行完毕”。

then 和 catch 方法的执行顺序

由于 then 方法和 catch 方法都是异步执行的，所以在执行过程中具有不确定性。但通常情况下，then 方法会在 catch 方法之前执行。

例如：

// javascriptcn.com 代码示例
const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功");
  }, 1000);
});

promise3.then((value) => {
  console.log(value);
  throw new Error("错误信息");
}).catch((error) => {
  console.log(error);
});

上述代码表示，在一秒钟后，自定义一个 Promise 对象并将其状态设置为 Fulfilled，值为“成功”。接着，在 then 方法中输出“成功”信息，并且抛出一个错误。最后，在 catch 方法中捕获错误并输出相关信息。程序执行结果为：

成功
Error: 错误信息

从上述代码中可以看出，Promise 对象状态为 Fulfilled，先执行了 then 方法中的回调函数，之后在 catch 方法中捕获异常。

总结

Promise 对象有三种状态：Pending（等待态）、Fulfilled（成功态）和Rejected（失败态）。
then 方法用来指定 Promise 对象状态为 Fulfilled 时的回调函数。
catch 方法用来指定 Promise 对象状态为 Rejected 时的回调函数。
在 then 方法和 catch 方法执行过程中具有不确定性，通常情况下 then 方法会在 catch 方法之前执行。

通过本文的讲述，我们可以更详细深入地学习 Promise 技术，并且在日后的工作中更灵活地运用 Promise 相关知识。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6538f4917d4982a6eb223c21