Promise.then 和 Promise.catch 的用法总结-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 Web 应用的不断发展，JavaScript 的重要性也越来越显著。Promise 是 JavaScript 中一种异步编程的解决方案，而 Promise.then 和 Promise.catch 是 Promise 的两个重要方法。本文将详细探讨它们的用法和意义。

Promise 简介

Promise 用于封装异步操作，使其更容易处理。Promise 通常表示一个异步操作的最终结果，在操作完成后会返回一个值。该值可以是 resolved 状态的值，也可以是 rejected 状态的错误原因。Promise 有三种状态：pending、fulfilled 和 rejected。

Promise 对象的基本用法如下：

// javascriptcn.com 代码示例
const promise = new Promise(function(resolve, reject) {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // fulfilled，操作成功
}, function(error) {
  // rejected，操作失败
});

Promise.then 方法

Promise.then 方法是用来添加回调函数的，当 Promise 状态变为 resolved 时，该方法会被调用。Promise.then 有两个参数，第一个参数是 resolved 状态的回调函数，第二个参数是 rejected 状态的回调函数（可选）。

promise.then(
  function(result) {
    // resolved 状态的回调函数
  },
  function(error) {
    // rejected 状态的回调函数（可选）
  }
);

如果 Promise 状态已经是 resolved，Promise.then 的回调函数会立即被调用。如果 Promise 状态是 pending，那么 Promise.then 的回调函数仍然会被调用，但是需要等到 Promise 状态变为 resolved。

在 Promise.then 回调函数中，可以返回 Promise 对象，这样就可以实现一组异步操作的顺序执行。

// javascriptcn.com 代码示例
promise.then(function(result) {
  return new Promise(function(resolve, reject) {
    // 另一个异步操作
    if (/* 异步操作成功 */) {
      resolve(value);
    } else {
      reject(error);
    }
  })
}).then(function(result) {
  // 第二个异步操作成功回调函数
}).catch(function(error) {
  // 操作失败回调函数
});

Promise.catch 方法

Promise.catch 方法是用来添加 rejected 状态回调函数的。它是 Promise.then 的简写形式：Promise.then(null, rejectedCallback)。

promise.catch(function(error) {
  // rejected 状态的回调函数
});

可以理解为 Promise.then 的 shorthand，特别是当 Promise.then 的 resolved 状态回调函数不需要任何操作，只是简单地将 Promise 对象传递给下一个操作时，我们可以用 Promise.catch 去代替 Promise.then 的 resolved 状态回调函数。

promise.then().catch(function(error) {
  // rejected 状态的回调函数
});

示例代码

// javascriptcn.com 代码示例
// 异步操作 1
const promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("异步操作 1 成功");
  }, 1000);
});

// 异步操作 2
const promise2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("异步操作 2 成功");
  }, 2000);
});

// 异步操作失败
const promise3 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    reject("异步操作 3 失败");
  }, 3000);
});

promise1.then(function(result) {
  console.log(result);
  return promise2;
}).then(function(result) {
  console.log(result);
  return promise3;
}).catch(function(error) {
  console.log(error);
});

以上代码将会依次打印如下消息：

异步操作 1 成功
异步操作 2 成功
异步操作 3 失败

总结

Promise.then 和 Promise.catch 是 Promise 的两个重要方法，用于添加回调函数处理异步操作的 resolved 和 rejected 状态。在 Promise.then 回调函数中，可以返回 Promise 对象，从而实现异步操作的顺序执行；而在 Promise.catch 中，可以处理异步操作的出错情况。建议在开发过程中多使用 Promise.then 和 Promise.catch，以提高代码可读性和可维护性。

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