javascript - 在 promise 中执行 forEach 异步请求吗？

Question

需要有关 promise 的帮助。请引用下面的详细信息，主题比较理论，我不明白我应该使用什么流程:

1. 我们有异步函数 getDataFromUri()，它返回数据，这些数据被过滤并保存到对象的 arr 中，我们将其命名为 res；
2. 对于数组 res 中的每个事件(对象)，我想发送异步请求，它将事件的产品图像存储到对象。因此，我应该有一个数组 res，其中存储了所有过滤后的数据(事件名称、事件图像)；

我需要这样的东西:

[{
  name: "Somename",
  images: ['uri', 'uri', 'uri', 'uri', 'uri', 'uri']
},{
  name: "Somename",
  images: ['uri', 'uri', 'uri', 'uri', 'uri', 'uri']
}
]

1. 用 RES 数组做一些其他的操作。

此函数获取事件:

function getDataFromUri(uri) {
  return new Promise((resolve, reject) => {
    request.get(uri, (err, res, body) => {
     if(err || res.statusCode !== 200 ) {
       reject(handleErr(err));
     } else {
       resolve(body);
     }
   });
 });
}

此函数获取广告系列的图像:

function getProductsOfCampaign(id) {
  var productsImagesLinks = [];
  return new Promise((resolve, reject) => {
    getDataFromUri(`SOME_URI/${id}.json`)
      .then((json) => {
        var productsList = JSON.parse(json).products;
        resolve (productsList.map((product) => product.imgSrc));
      }).catch((e) => {
        throw new Error(e);
      })
  });
}

这里我遇到了问题:

getDataFromUri(someLink) //Get campaings;
  .then((result) => {

    //NOT WORKING FOREACH

    result.forEach((item, i) => {
      item.images = getProductsOfCampaign(item.id);
    })

    return result;
    })
  .then((result) => {
    //Do something else to array with images;
  });

1. 如何在 forEach .then() 表达式之后强制 next 等待所有图像 URL 被保存？
2. 我试过 Promise.all()，但似乎缺乏关于如何正确实现它的知识。

如果您能帮我解决这个问题，我将不胜感激。谢谢。

Answer 1

注意:

forEach 中的
1. item 是一个副本。
2. getProductsOfCampaign 返回一个 Promise。
3. 网络是一种尽力而为的服务。

这样做:

getDataFromUri(someLink) // Get campaigns
  .then(result => {

    var promises = result.map(item =>
      getProductsOfCampaign(item.id)
        .then(products => {
          item.images = products;
          return item;
        })
        // 3: Best-effort service
        .catch(() => {})
    );

    return Promise.all(promises);
  }).then(items => {

    console.log(items);
    // Do something else to array of items with images
  });

---

其他读者可以用这个来测试正确性:

function getDataFromUri(someLink) {
  return new Promise((resolve) => {
    setTimeout(resolve, 1000, [{id: 1}, {id: 2}]);
  })
}

function getProductsOfCampaign(id) {
  return new Promise((resolve) => {
    setTimeout(resolve, 1000, id * id);
  })
}

var someLink = '';

感谢 Benjamin Gruenbaum 建议 .catch(() => {}) 可以与 Promise.all 一起使用尽力服务。