Promise.then 你以为你懂了吗？

2024-01-05 05:11:22

使用 Promise.then 来掌控异步操作执行顺序

在现代网络开发中，异步编程已成为常态。JavaScript 提供了 Promise 来简化对异步操作的处理，其中 Promise.then() 方法扮演着至关重要的角色。本文将深入探究 Promise.then()，探讨如何利用它来精细控制异步操作的执行顺序。

什么是 Promise？

Promise 是一个表示异步操作最终结果的对象。它可以处于三种状态：

Pending（等待）： 操作尚未完成或失败。
Fulfilled（已完成）： 操作成功完成并返回结果。
Rejected（已拒绝）： 操作失败并返回错误。

Promise.then() 的作用

Promise.then() 方法为我们提供了监听 Promise 状态变化并执行相应操作的机制。它有两种形式：

Promise.then(onFulfilled, onRejected)
Promise.then(onFulfilled)

执行顺序

Promise.then() 的执行顺序如下：

当 Promise 完成或失败时，Promise.then() 方法被调用。
如果 Promise 成功完成，则调用 onFulfilled 回调函数，并传递完成结果。
如果 Promise 失败，则调用 onRejected 回调函数，并传递错误信息。
onFulfilled 或 onRejected 回调函数可以返回一个 Promise 或一个值。
如果返回一个 Promise，则新 Promise 的状态取决于原始 Promise。
如果返回一个值，则新 Promise 将成功并返回该值。
如果 onFulfilled 或 onRejected 回调函数抛出错误，则新 Promise 将失败并返回错误信息。

控制执行顺序

Promise.then() 的强大之处在于它可以链接多个异步操作，创建异步操作链。我们可以利用它来控制操作执行的顺序。

例如，要获取用户数据，其订单，然后是地址，我们可以使用以下代码：

getUser()
  .then(function(user) {
    return getOrders(user.id);
  })
  .then(function(orders) {
    return getAddresses(user.id);
  })
  .then(function(addresses) {
    // 处理用户数据、订单和地址
  });

这里，我们使用 Promise.then() 将 getUser() 的结果传递给 getOrders()，再将 getOrders() 的结果传递给 getAddresses()。这确保了按正确顺序获取数据。

示例代码

下面是一个实际示例，展示如何使用 Promise.then() 控制异步操作的执行顺序：

const getUserData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: 'John Doe' });
    }, 1000);
  });
};

const getOrders = (userData) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(['Order 1', 'Order 2']);
    }, 1000);
  });
};

const getAddresses = (userData) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(['Address 1', 'Address 2']);
    }, 1000);
  });
};

getUserData()
  .then(getOrders)
  .then(getAddresses)
  .then((addresses) => {
    console.log(addresses); // ['Address 1', 'Address 2']
  });