Promise 中的.then 和.catch 的区别-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步编程是非常常见的一种情况。而在异步操作中，我们使用 Promise 来进行异步编程，以保证代码的可读性和可维护性。Promise 对象有两个方法，.then() 和 .catch()，这两个方法都是用来处理 Promise 异步操作的结果。

本文将介绍 .then() 和 .catch() 方法的区别，包括用法、返回值等方面，并结合代码示例进行讲解。

.then() 方法

. then() 方法是 Promise 对象中最常用的方法之一，它的作用是将 Promise 对象的状态从“未完成（pending）”转变为“已完成（resolved）”，然后进行一些相关操作。

. then() 方法接受两个参数，第一个参数是用于处理 Promise 对象成功状态的回调函数，第二个参数是用于处理 Promise 对象失败状态的回调函数（可选）。下面是一个基本的示例：

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

promise.then(() => {
  // 成功状态的回调函数
}).catch(() => {
  // 失败状态的回调函数
});

在上面的示例中，我们创建了一个 Promise 对象，并在其内部调用了 resolve() 方法，从而使得 Promise 对象的状态从“未完成”变为“已完成”。接着，我们通过调用 .then() 方法来处理 Promise 对象成功状态的回调函数。

.catch() 方法

另一个十分常用的 Promise 方法是.catch() 方法。与 .then() 方法不同，.catch() 方法的作用是处理 Promise 对象失败状态的回调函数。

与 .then() 方法一样，.catch() 方法也接收一个函数作为参数，并且该函数只负责处理 Promise 对象的失败状态，即处理 Promise 对象中传递的错误信息。下面是一个简单示例：

const promise = new Promise((resolve,reject) => {
  reject('出错了');
});

promise.catch((err) => {
  console.log('捕获到错误信息：' + err);
});

在上面的代码中，我们向 Promise 对象中传递了一个错误信息，并在 .catch() 方法中处理 Promise 对象的失败状态。.catch() 方法接收一个函数作为参数，该函数负责处理 Promise 对象的失败状态。

区别

理解了 .then() 和 .catch() 的基本用法之后，我们来看一下它们之间的区别。

操作结果不同：.then() 方法处理 Promise 对象完成状态的回调函数，而 .catch() 方法处理 Promise 对象失败状态的回调函数。
传递参数不同：.then() 方法接收两个函数作为参数（第一个是处理成功状态的回调函数，第二个是处理失败状态的回调函数），而 .catch() 方法只传递一个处理失败状态的回调函数。
返回值不同：.then() 方法返回的是一个新的 Promise 对象（可以在 .then() 方法之后再进行调用），而 .catch() 方法返回的依然是当前的 Promise 对象。

下面是一个代码示例，用来说明两者之间的差异：

// javascriptcn.com 代码示例
const promise = new Promise((resolve,reject) => {
  // reject('出错了');
  resolve('成功了');
});

promise.then((res) => {
  console.log('第一步：' + res); // 成功了
  return '第一步返回值'
}).then((res) => {
  console.log('第二步：' + res); // 第一步返回值
  return '第二步返回值'
}).catch((err) => {
  console.log('第一步错误信息：' + err); // 出错了
}).then((res) => {
  console.log('第三步：' + res); // 第二步返回值
});

上面的代码中，我们创建了一个 Promise 对象，并在其中传递了一个成功值。接着，我们通过 .then() 方法来处理 Promise 对象成功状态的回调函数，并返回一个新的 Promise 对象。但在第一步的过程中，我们抛出了一个异常，从而导致 Promise 对象失败。于是，在第二个 .then() 方法中，我们跳过了第一步，并打印出了第一步的错误信息。

可以注意到，最后的 .then() 方法的返回值始终是 Promise 对象的完成状态，这说明了 .then() 方法和 .catch() 方法之间的区别。

总结

通过本文的介绍，我们知道了 .then() 和 .catch() 的作用，以及它们之间的区别。在实际开发中，我们需要根据具体需要来使用这两个方法，以保证程序的运行正确和高效。

值得注意的是，我们可以在 Promise 中连续使用多个 .then() 方法，但只能使用一个 .catch() 方法。

希望本文对您有所帮助。

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