JS中的Promise.then和.catch方法|极客笔记

JS中的Promise.then和.catch方法

在JavaScript编程中，我们经常会遇到异步操作，例如网络请求、文件操作等。为了更好地管理这些异步操作，ES6新增了Promise对象，它表示一个异步操作的最终完成或失败，以及其结果值。Promise对象具有以下几种状态：

pending（进行中）：初始状态，既不是成功也不是失败状态。
fulfilled（已成功）：意味着操作成功完成。
rejected（已失败）：意味着操作失败。

在Promise对象中，我们可以使用.then()方法处理成功的结果，使用.catch()方法处理失败的结果。下面我们将详细介绍.then()和.catch()方法的用法以及示例代码。

Promise.then()方法

.then()方法用于指定Promise对象成功时的回调函数，它接收两个参数，一个是成功的处理函数，一个是失败的处理函数。下面是.then()方法的完整语法：

promise.then(onFulfilled, onRejected)

onFulfilled：成功时的回调函数，接收成功的结果作为参数。
onRejected：失败时的回调函数，接收失败的原因作为参数。

下面是一个简单的示例，演示了如何使用.then()方法处理成功的情况：

// 创建一个成功的Promise对象
let promise = new Promise((resolve, reject) => {
  resolve('成功');
});

promise.then((result) => {
  console.log(result); // 输出：成功
});

在这个示例中，我们创建了一个成功的Promise对象，然后使用.then()方法处理成功的情况，当Promise对象变为fulfilled状态时，调用成功的处理函数，并将成功的结果作为参数传入。

Promise.catch()方法

.catch()方法用于指定Promise对象失败时的回调函数，它只接受一个参数，即失败的处理函数。下面是.catch()方法的完整语法：

promise.catch(onRejected)

onRejected：失败时的回调函数，接收失败的原因作为参数。

下面是一个简单的示例，演示了如何使用.catch()方法处理失败的情况：

// 创建一个失败的Promise对象
let promise = new Promise((resolve, reject) => {
  reject('失败');
});

promise.catch((reason) => {
  console.log(reason); // 输出：失败
});

在这个示例中，我们创建了一个失败的Promise对象，然后使用.catch()方法处理失败的情况，当Promise对象变为rejected状态时，调用失败的处理函数，并将失败的原因作为参数传入。

Promise链式调用

在实际开发中，我们经常会遇到需要依次执行多个异步任务的情况，此时就需要使用Promise对象的链式调用。通过.then()方法返回一个新的Promise对象，使得多个异步操作按顺序执行。

下面是一个示例，演示了如何使用Promise链式调用：

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第一个异步任务完成');
  }, 1000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第二个异步任务完成');
  }, 2000);
});

promise1
  .then((result) => {
    console.log(result); // 输出：第一个异步任务完成
    return promise2;
  })
  .then((result) => {
    console.log(result); // 输出：第二个异步任务完成
  });

在这个示例中，我们依次执行两个异步任务，第一个异步任务完成后返回promise2对象，然后继续执行第二个异步任务。通过Promise链式调用，可以更好地管理多个异步任务的顺序和结果。

使用.async/.await简化Promise链式调用

在ES8中，引入了async和await关键字，用来简化异步操作的写法。通过async函数，可以让函数变成异步执行，而await关键字可以等待一个Promise对象的状态变为fulfilled或rejected。

下面是一个示例，演示了如何使用async和await简化Promise链式调用：

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第一个异步任务完成');
  }, 1000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第二个异步任务完成');
  }, 2000);
});

async function asyncFunc() {
  try {
    let result1 = await promise1;
    console.log(result1); // 输出：第一个异步任务完成

    let result2 = await promise2;
    console.log(result2); // 输出：第二个异步任务完成
  } catch (error) {
    console.error(error);
  }
}

asyncFunc();

在这个示例中，我们定义了一个async函数，并在函数内使用await关键字等待Promise对象的完成。通过async和await，可以使异步操作的编写更加简洁和易读。

通过以上介绍，我们了解了在JavaScript中使用Promise对象的.then()和.catch()方法来处理异步操作的成功和失败情况，并且学会了如何使用Promise链式调用以及async/await简化异步操作的编写。在实际开发中，灵活运用Promise对象的相关方法可以更好地处理各种异步操作，提高代码的可维护性和可读性。