Map 函数在 .then() 中不起作用答案

【问题标题】：Map function is not working inside the .then()Map 函数在 .then() 中不起作用
【发布时间】：2021-08-19 02:42:19
【问题描述】：

我有以下两个功能功能01

export const generateProductList = async (products: IProduct[]) => {
    const productList: IProduct[] = [];
    products.map((product: IProduct, i: number) =>{
        downloadImageAwsS3(product.image)
            .then(res => {
                productList.push({...product, image: res})
            })
    })
    console.log(productList)
    return productList
}

功能02

const productGenerator = (products: IProduct[]) => {
    const checkoutList: any[] = [];
    generateProductList(products)
      .then((res) => {
        console.log(res)
        res.map(product => {
          checkoutList.push(product)
          console.log(product)
        })
    return checkoutList
  })
  }

.then() 和 map 函数内部的第二个函数无法正常工作，谁能帮我弄清楚这个

【问题讨论】：

这能回答你的问题吗？ How to return the response from an asynchronous call?
考虑使用async-await
它工作正常，但您在执行回调之前打印您的列表...
在函数 2 console.log(res) 中给出输出
你的意思是：工作不正常？

标签： typescript asynchronous promise map-function

【解决方案1】：

您可以在.then() 中尝试response = res.json()，有时响应会出现在读取流中。

【讨论】：

【解决方案2】：

问题是你没有等待承诺的结果。 downloadImageAwsS3(product.image) 和 generateProductList(products) 都返回 Promise。此外，map() method 创建了一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。

您的代码的正确版本应该是这样的：

export const generateProductList = async (products: IProduct[]) => {
  const promises = products.map(async (product: IProduct, i: number) =>{
      const res = await downloadImageAwsS3(product.image);
      return {...product, image: res};
  });
  const productList = await Promise.all(promises);
  console.log(productList)
  return productList;
}

第二个函数没有多大意义，因为它只是返回第一个函数的结果，但如果你想映射值并做一些事情，你可以这样做：

const productGenerator = async (products: IProduct[]) => {
   const productList = await generateProductList(products);
   const convertedProducts = productList.map((product) => {
     console.log(product)
     // return a new value here
   });
   return convertedProducts;
}

【讨论】：

【解决方案3】：

鉴于您提供的有关您面临的问题的背景信息很少，因此很难说。你期待什么，你看到了什么？

假设downloadImageAwsS3 方法返回一个Promise，我猜测generateProductList 方法在完成所有products 的映射之前返回。

您可以尝试从products.map 返回Promises，以便products 中的每个产品都映射到Promise，然后等待所有这些承诺与Promise.allSettled 达成一致。

export async function generateProductList(products: IProduct[]): Promise<IProduct[]> {
  const productList: IProduct[] = [];
  await Promise.allSettled(products.map(async (product: IProduct) => {
    const response = await downloadImageAwsS3(product.image);
    productList.push({...product, image: response});
  }));
  return productList;
}

【讨论】：