为何在getCart()方法中使用await后仍返回Pending Promise？代码是否存在概念性错误？

核心问题所在 #

你遇到的问题根源在于**Array.map()不会等待异步函数完成**。当你在map里使用async回调时，map会立即返回一个由Promise组成的数组，而不会等待这些Promise逐一解析。所以即使你在getCart的立即执行异步函数里写了await，也只是等待了这个函数本身执行完毕，但数组里的每个Promise依然处于pending状态。

回到你的代码：this.cart.items.map(async (item) => {...})返回的是Promise数组，你直接把这个数组返回了，没有等待所有Promise完成。因此外面await req.user.getCart()拿到的还是这个Promise数组，每个元素自然都是pending的。

修复方案 #

你需要用Promise.all()来等待数组中所有的Promise都解析完成，这样才能拿到最终的产品数据数组。修改你的getCart方法如下：

class User {
  constructor(..., cart) {
    //...
    this.cart = cart; //{items: []}
  }
  getCart() {
    return (async () => {
      const productPromises = this.cart.items.map(async (item) => {
        const product = await Products.getProductDetail(item.productId);
        product.qty = item.qty;
        return product;
      });
      // 等待所有Promise完成，得到解析后的产品数组
      const products = await Promise.all(productPromises);
      console.log(products); // 现在是解析后的产品数据数组
      return products;
    })();
  }
}

这样修改后，getCart返回的Promise会等待所有产品详情的Promise都完成，然后返回解析后的产品数组。此时在renderCart里await req.user.getCart()就能拿到真正的产品数据了。

更简洁的写法优化 #

你也可以把getCart直接声明为async方法，省去立即执行异步函数的写法，代码会更清晰：

class User {
  constructor(..., cart) {
    //...
    this.cart = cart; //{items: []}
  }
  async getCart() { // 直接声明为async方法
    const productPromises = this.cart.items.map(async (item) => {
      const product = await Products.getProductDetail(item.productId);
      product.qty = item.qty;
      return product;
    });
    return await Promise.all(productPromises);
  }
}

调用时await req.user.getCart()的逻辑完全一致，可读性更强。

内容的提问来源于stack exchange，提问作者Mitanshu