JS中的then方法详解|极客笔记

JS中的then方法详解

在JavaScript中，Promise对象是用来表示一个异步操作的最终完成或失败及其结果值的对象。而Promise对象的then方法是用来注册当Promise对象状态发生改变时的回调函数。在本文中，我们将详细解释Promise对象中的then方法的用法。

then方法的基本语法

Promise对象的then方法用于添加解决（resolve）和拒绝（reject）状态的回调函数。它接收两个参数，第一个参数是解决状态的回调函数，第二个参数是拒绝状态的回调函数。then方法会返回一个新的Promise对象。

promise.then(onFulfilled, onRejected)

onFulfilled：当Promise对象的状态变为解决时，会调用这个回调函数。这个回调函数接收Promise对象的值作为参数。
onRejected：当Promise对象的状态变为拒绝时，会调用这个回调函数。这个回调函数接收Promise对象的拒绝原因作为参数。

then方法的链式调用

由于then方法返回一个新的Promise对象，因此可以实现对多个异步操作的串行执行。通过链式调用then方法，可以依次处理每个异步操作的结果。

promise
  .then(onFulfilled1, onRejected1)
  .then(onFulfilled2, onRejected2)
  .then(onFulfilled3, onRejected3)
  .catch(onError)

在链式调用then方法时，每个then方法可以返回一个新的Promise对象，可以在下一个then方法中继续处理数据，也可以在catch方法中处理异常情况。

then方法的使用示例

下面我们通过一个示例来说明then方法的使用。假设有一个异步函数fetchData用于获取数据，并返回一个Promise对象。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = Math.random() > 0.5 ? { message: 'Data fetched successfully' } : new Error('Failed to fetch data');
      if (data instanceof Error) {
        reject(data);
      } else {
        resolve(data);
      }
    }, 1000);
  });
}

接下来，我们可以通过then方法处理异步操作返回的数据。

fetchData()
  .then((data) => {
    console.log(data.message);
    return data.message.toUpperCase();
  })
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.error(error.message);
  });

在上面的示例中，首先调用fetchData函数获取数据，然后通过链式调用then方法处理数据。第一个then方法将数据打印到控制台，并将数据转换为大写形式传递给下一个then方法，最后一个then方法再次将数据打印到控制台。如果数据获取失败，则会调用catch方法捕获异常并打印错误信息。

then方法的执行顺序

在使用then方法处理异步操作时，需要注意then方法的执行顺序。then方法中的回调函数会按照它们在Promise链中的顺序依次执行，即使某个回调函数执行时间较长也不会影响后续回调函数的执行顺序。

fetchData()
  .then((data) => {
    console.log(1);
    return data;
  })
  .then((data) => {
    console.log(2);
    return data;
  })
  .then((data) => {
    console.log(3);
    return data;
  });

在上面的示例中，即使第一个then方法中的回调函数执行时间较长，仍然会按照顺序执行后续的then方法。