JavaScript中的then和catch方法详解|极客笔记

JavaScript中的then和catch方法详解

在JavaScript中，Promise是一种用于处理异步操作的对象。Promise对象代表一个异步操作的最终完成或失败，并且其最终返回一个值。在Promise对象上，我们经常使用then和catch方法来处理操作成功和失败的情况。

then方法

then方法是Promise对象实例的一个方法，它用于注册当Promise对象状态发生改变时的回调函数。then方法接受两个参数：一个成功的回调函数和一个失败的回调函数。当Promise对象由pending状态变为fulfilled状态时，将会调用成功的回调函数；当Promise对象由pending状态变为rejected状态时，将会调用失败的回调函数。

示例代码如下：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const random = Math.random();
    if (random > 0.5) {
      resolve(random);
    } else {
      reject("出现错误");
    }
  }, 1000);
});

promise.then(
  (value) => {
    console.log("成功：", value);
  },
  (error) => {
    console.log("失败：", error);
  }
);

在上面的示例中，我们创建了一个Promise对象，该Promise对象在1秒后返回一个随机数。如果随机数大于0.5，则调用成功的回调函数输出”成功”；否则调用失败的回调函数输出”失败”。

catch方法

catch方法是Promise对象实例的一个方法，它用于注册当Promise对象发生rejection时的回调函数。catch方法只接收一个参数，即失败的回调函数。

示例代码如下：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("出现错误");
  }, 1000);
});

promise.catch((error) => {
  console.log("失败：", error);
});

在上面的示例中，我们创建了一个Promise对象，在1秒后返回一个rejected状态的Promise对象，并通过catch方法注册了一个失败的回调函数来处理错误信息。

then和catch方法的链式调用

在实际开发中，我们通常会将then方法和catch方法进行链式调用，以便更好地处理异步操作的结果。then方法会返回一个新的Promise对象，因此我们可以对返回的Promise对象继续调用then方法或catch方法。

示例代码如下：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const random = Math.random();
    if (random > 0.5) {
      resolve(random);
    } else {
      reject("出现错误");
    }
  }, 1000);
});

promise
  .then((value) => {
    console.log("成功：", value);
    return value * 2;
  })
  .then((newVal) => {
    console.log("新值：", newVal);
  })
  .catch((error) => {
    console.log("失败：", error);
  });

在上面的示例中，我们首先返回一个Promise对象，然后对返回的Promise对象调用then方法，将成功的回调函数中的值乘以2，并返回一个新的Promise对象。然后对新的Promise对象调用then方法，继续处理后续的操作。