JS中的.then方法如何使用|极客笔记

JS中的.then方法如何使用

在JavaScript中，.then() 方法是 Promise 对象的原型方法，用于处理 Promise 对象的成功和失败状态。Promise 对象代表一个异步操作的结果，可以是成功的结果或失败的原因。在实际开发中，我们经常会使用 .then() 方法来处理异步操作的结果，以确保我们可以正确地处理成功和失败的情况。

语法

.then() 方法的语法如下：

promise.then(onFulfilled, onRejected)

参数解释：

onFulfilled ：当 Promise 状态为 fulfilled 时，即操作成功完成时，会调用这个函数。
onRejected ：当 Promise 状态为 rejected 时，即操作出错时，会调用这个函数。

使用示例

下面是一个简单的示例，演示如何使用 .then() 方法处理 Promise 对象的成功和失败状态：

// 创建一个 Promise 对象
const myPromise = new Promise((resolve, reject) => {
  const randomNumber = Math.random();

  if (randomNumber > 0.5) {
    resolve('操作成功');
  } else {
    reject('操作失败');
  }
});

// 使用 .then() 方法处理成功和失败状态
myPromise.then((successMessage) => {
  console.log('成功：', successMessage);
}).catch((errorMessage) => {
  console.log('失败：', errorMessage);
});

在上面的示例中，我们首先创建了一个 Promise 对象 myPromise，根据生成的随机数决定 Promise 对象是成功还是失败。然后使用 .then() 方法处理 Promise 对象的成功和失败状态，成功时输出成功信息，失败时输出失败信息。

连续调用

.then() 方法可以进行链式调用，让多个异步操作按顺序执行。下面是一个展示链式调用的示例：

// 创建第一个 Promise 对象
const firstPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第一个操作成功');
  }, 2000);
});

// 创建第二个 Promise 对象
const secondPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第二个操作成功');
  }, 1000);
});

// 链式调用多个 Promise 对象
firstPromise.then((message) => {
  console.log(message);
  return secondPromise;
}).then((message) => {
  console.log(message);
});

在上面的示例中，我们首先创建了两个 Promise 对象 firstPromise 和 secondPromise，分别模拟两个异步操作。然后通过 .then() 方法进行链式调用，第一个 Promise 对象成功后调用第二个 Promise 对象。

Promise.all()

除了使用 .then() 方法处理单个 Promise 对象外，我们还可以使用 Promise.all() 方法同时处理多个 Promise 对象。Promise.all() 方法接收一个 Promise 对象数组，并在所有 Promise 对象都成功时返回一个成功的 Promise 对象，一旦其中一个失败则会立即返回失败。

下面是一个展示 Promise.all() 的示例：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 已完成');
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 已完成');
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 3 已完成');
  }, 1500);
});

Promise.all([promise1, promise2, promise3])
  .then((messages) => {
    console.log('所有 Promise 对象都已完成');
    messages.forEach((message) => {
      console.log(message);
    });
  })
  .catch((error) => {
    console.log('有 Promise 对象失败了：', error);
  });

在上面的示例中，我们创建了三个 Promise 对象，使用 Promise.all() 方法同时处理这三个 Promise 对象。如果所有 Promise 对象都成功，则会输出所有成功的信息；如果有一个失败，则会输出失败信息。