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

如何使用JavaScript中的then方法

在JavaScript中，Promise是一种处理异步操作的方式。Promise对象代表一个异步操作的最终完成或失败，以及它的结果值。

在Promise对象中，then方法用于添加处理成功的回调和失败的回调。then方法接收两个参数：一个成功时的回调函数和一个失败时的回调函数。

本文将详细讨论如何使用JavaScript中的then方法来处理Promise对象。

创建Promise对象

首先，我们来看一个简单的示例，创建一个Promise对象：

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(randomNumber);
    } else {
      reject("Random number is less than 0.5");
    }
  }, 1000);
});

在上面的代码中，我们创建了一个Promise对象myPromise，在Promise对象中我们使用了一个异步操作来生成一个随机数。如果随机数大于0.5，我们使用resolve方法来resolve Promise，并传递随机数作为结果值；如果随机数小于等于0.5，我们使用reject方法来reject Promise，并传递一个错误信息。

使用then方法处理Promise对象

一旦我们有了一个Promise对象，我们可以使用then方法来处理它的结果。then方法接收两个参数：一个成功时的回调函数和一个失败时的回调函数。

myPromise.then(
  (result) => {
    console.log("Random number is greater than 0.5:", result);
  },
  (error) => {
    console.error("Error:", error);
  }
);

在上面的代码中，我们调用了myPromise对象的then方法，传入了两个回调函数：成功时的回调函数和失败时的回调函数。如果Promise对象被resolved，成功时的回调函数会被调用，并且传递随机数作为结果值；如果Promise对象被rejected，失败时的回调函数会被调用，并且传递一个错误信息。

then方法链式调用

在处理Promise对象时，我们可以将多个then方法进行链式调用，以便处理多个异步操作的结果。

myPromise
  .then((result) => {
    console.log("Random number is greater than 0.5:", result);
    return result * 2;
  })
  .then((result) => {
    console.log("Doubled random number is:", result);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

在上面的代码中，我们在第一个then方法中对随机数进行了乘以2的操作，并将结果传递给下一个then方法。如果任何一个then方法中出现了错误，可以使用catch方法来捕获错误。

then方法返回一个新的Promise对象

在调用then方法时，它会返回一个新的Promise对象，这个新的Promise对象可以被用于链式调用。

const promise1 = new Promise((resolve, reject) => {
  resolve(1);
});

const promise2 = promise1.then((result) => {
  console.log("Result: ", result);
  return result * 2;
});

promise2.then((result) => {
  console.log("Doubled Result: ", result);
});

在上面的代码中，promise2是通过promise1的then方法返回的一个新的Promise对象。我们可以继续链式调用promise2的then方法来处理结果。