Skip to content

Promise 是 JavaScript 中用于处理异步操作的一种机制。它代表一个未来可能完成或失败的操作及其结果值。

Promise 提供了一种更优雅、可读性更强的方法来处理回调函数嵌套和错误处理。

下面是对 Promise 的详细介绍。

一个 Promise 对象可以处于以下三种状态之一:

Pending(进行中):初始状态,既没有完成也没有失败。 Fulfilled(已成功):操作成功完成,并有一个值。 Rejected(已失败):操作失败,并有一个原因。

javascript
function getUser(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('User information retrieved');
      if (!userId) {
        reject('Error: Invalid userId');
      } else {
        resolve({ userId: userId, username: 'John Doe' });
      }
    }, 2000);
  });
}

function getOrders(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Orders retrieved');
      if (userId !== 1) {
        reject('Error: No orders found for this user');
      } else {
        resolve([{ orderId: 1, amount: 100 }, { orderId: 2, amount: 150 }]);
      }
    }, 2000);
  });
}

function calculateTotal(orders) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (!Array.isArray(orders) || orders.length === 0) {
        reject('Error: No valid orders to calculate total');
      } else {
        const total = orders.reduce((sum, order) => sum + order.amount, 0);
        console.log('Total calculated');
        resolve(total);
      }
    }, 1000);
  });
}

// 使用 Promise 链式调用,避免了原始方式的多层嵌套
getUser(1)
  .then(user => {
    console.log('User:', user);
    return getOrders(user.userId);
  })
  .then(orders => {
    console.log('Orders:', orders);
    return calculateTotal(orders);
  })
  .then(total => {
    console.log('Total amount:', total);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// async、await进一步提高了异步操作的可读性,使用 async/await 和错误处理
async function processOrder(userId) {
  try {
    const user = await getUser(userId);
    console.log('User:', user);
    
    const orders = await getOrders(user.userId);
    console.log('Orders:', orders);
    
    const total = await calculateTotal(orders);
    console.log('Total amount:', total);
    
  } catch (error) {
    console.error('Error:', error); // 捕获任何 reject 触发的错误
  }
}

// 调用 async 函数
processOrder(1);   // 正常情况
processOrder(0);   // 无效的 userId
processOrder(2);   // userId 2 没有订单