如何在 map 函数中使用 async 和 await 进行顺序执行答案

【问题标题】：How to use async and await inside a map function for sequential executing如何在 map 函数中使用 async 和 await 进行顺序执行
【发布时间】：2019-11-27 10:53:36
【问题描述】：

嗨，对我来说，异步和等待是安静的新功能。我有需要等待方法的函数调用，因此我需要使用异步和等待。我得到了值，但它们不按顺序排列。

下面是我的 async 和 await map 函数

items.map(async (item) =>{
const itemx = await  
   Promise.all([w.getFileByServerRelativeUrl(item.FieldValuesAsText.FileRef).getItem()]);
  var likes = await Promise.all(itemx.getLikedByInformation());
  const comments = await Promise.all(itemx.comments.get());      
  articles[i].likecount = likes.likeCount
  articles[i].commentcount = comments.length
  articles[i].FileRef = item.FieldValuesAsText.FileRef
  newst.push(articles[i++])
  })

任何建议都会很有帮助

【问题讨论】：

` but they are not in order` 是什么意思？？你说的是哪个订单？
i 和 j 的范围是什么。它们是什么。
这个变量i 是从哪里来的？为什么要增加j？
@panepeter 我已更正，您现在能找到解决方案吗？
@user8535404 我看到你已经有了答案。不过，感谢您清理代码！它现在的样子只是所以更容易阅读和理解......这对试图提供帮助的人更具吸引力:)

标签： javascript asynchronous async-await

【解决方案1】：

您必须等待 map 函数的 promise 才能按顺序获得结果。

async function main() {
  const items = []; // Fill your items
  const articles = []; // Fill your articles

  // Async map function return promise for each item
  const promises = items.map(async (item, i) => {
    console.log(item.FieldValuesAsText.FileRef);
    const itemx = await Promise.all([
      w.getFileByServerRelativeUrl(item.FieldValuesAsText.FileRef).getItem()
    ]);

    console.log(item);
    var likes;
    likes = await Promise.all(itemx.getLikedByInformation());
    console.log("like " + likes.likeCount);
    const comments = await Promise.all(itemx.comments.get());
    console.log("Comments Count " + comments.length);

    // Create new object by appending articles[i],likes,comments
    return {
      ...articles[i],
      likecount: likes.likeCount,
      commentcount: comments.length,
      FileRef: item.FieldValuesAsText.FileRef
    };
  });

  // Here you have everything in order.
  const newst = await Promise.all(promises);
}

每个 map item 函数都是异步运行的，因此 map 函数内部不能保证顺序，但是您可以从 map 函数返回值，该值可以使用 await Promise.all() 解析为有序数组，因为 promise 数组由map 函数的顺序正确。

【讨论】：

【解决方案2】：

尝试使用 Promise.mapSeries 进行异步等待的顺序访问。

 async function main() {

 const items = []; // Fill your items
  const articles = []; // Fill your articles

  await Promise.mapseries( items, async (item, i) => {
    const itemx = await      

 Promise.all([w.getFileByServerRelativeUrl(item.FieldValuesAsText.FileRef).getItem()]);


  console.log(item);
  var likes
  likes = await Promise.all(itemx.getLikedByInformation());
 console.log("like " + likes.likeCount);
  const comments = await Promise.all(itemx.comments.get());
  console.log("Comments Count " + comments.length);


  //articles[i] = articles[i]+likes+comments
  articles[i].likecount = likes.likeCount
  articles[i].commentcount = comments.length
  articles[i].FileRef = item.FieldValuesAsText.FileRef
  console.log(articles[i])

  newst.push(articles[i++])
  console.log(newst)
  j++
  })

【讨论】：

我正在使用 react ，我尝试了您的代码，但收到此错误 => “类型 'typeof Promise' 上不存在属性 'mapseries'”
Promise.mapSeries 是 bluebird library 的一部分（或其他库，谁知道……），但不是任何 ES 标准的一部分。如果你引用库中的函数，请这样说，否则测试你的代码的人会出错。