JS Promise then详解

JS Promise then详解

在JavaScript中，Promise是一种用于管理异步操作的对象。它表示一个异步操作的最终结果，可以是一个值或一个错误。Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。可以通过then方法来指定当Promise对象的状态改变时的回调函数。

then方法的基本用法

then方法可以接受两个参数：onFulfilled（成功时调用的回调函数）和onRejected（失败时调用的回调函数）。这两个参数都是可选的，如果不指定，则会被忽略。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('success');
    // reject('failure');
  }, 1000);
});

promise.then((value) => {
  console.log(value); // success
}, (reason) => {
  console.error(reason); // failure
});

在这个示例中，当Promise对象的状态变为fulfilled时，会调用then方法的第一个参数，打印出success；当状态变为rejected时，会调用第二个参数，打印出failure。

then方法的返回值

then方法返回一个新的Promise对象，可以通过这个新的Promise对象链式调用then方法。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

promise.then((value) => {
  console.log(value); // 1
  return value + 1;
}).then((value) => {
  console.log(value); // 2
  return value + 1;
}).then((value) => {
  console.log(value); // 3
});

在这个示例中，then方法中的回调函数会依次执行，并且每次返回的值会作为下一个then方法的参数。

then方法的异常处理

如果在then方法中抛出异常，会将这个异常作为下一个Promise对象的rejected状态传递下去，可以通过后面的catch方法捕获。

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

promise.then((value) => {
  throw new Error('error');
}).then((value) => {
  console.log(value);
}).catch((error) => {
  console.error(error.message); // error
});

在这个示例中，第一个then方法中抛出了异常，导致第二个then方法被跳过，直接进入catch方法。

then方法的异步操作

then方法返回的是一个新的Promise对象，因此它是异步操作的。如果在then方法中返回一个Promise对象，则可以利用这个特性实现异步调用。

const asyncTask = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('async result');
    }, 1000);
  });
};

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

promise.then((value) => {
  return asyncTask();
}).then((value) => {
  console.log(value); // async result
});

在这个示例中，第一个then方法中返回的是一个Promise对象，因此会等待这个Promise对象的状态改变后再继续执行下一个then方法。

then方法的实际应用

then方法广泛应用于处理异步操作，并且可以方便地串联多个异步操作，有效地解决了回调地狱的问题。

const fetchData = (url) => {
  return fetch(url)
    .then((response) => response.json())
    .then((data) => data);
};

fetchData('https://jsonplaceholder.typicode.com/posts/1')
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

在这个示例中，fetchData函数返回一个Promise对象，并使用then方法串联多个异步操作，最终打印出从API获取到的数据。

总的来说，then方法是Promise对象的核心方法之一，通过它可以有效地处理异步操作，并且实现链式调用，使代码更加清晰和易于管理。