承诺在减少数组方法javascript中没有得到解决

Question

我有大量对象，并根据用户 ID 过滤了对象。这是下面的代码。

const filteredArr = LargeArr.Items.reduce(
            async(acc, { attributes: { dob, name, picture} = { dob: null, name: null, picture: null }, userID }) => {
                let pic = null;
                if (picture) { pic = await getPic(picture); } // async here
                acc[userID] = { name, userID, pic, dob };
                return acc;
            }, {});

预期输出：

{
  '1595232114269': {
    name: 'Mark Status',
    userID: '1595232114269',
    picture: 'mark-status.jpg',
    dob: '2020-08-10'
  },
  '48e69555d778f9b9a3a1d553b9c3b8f7dd6a3394ac82df1433b60a69c055d23d': {
    name: 'Jack Thomas',
    userID: '48e69555d778f9b9a3a1d553b9c3b8f7dd6a3394ac82df1433b60a69c055d23d',
    picture: 'jack-thomas.jpg',
    dob: '1990-12-20'
  },
  '48e69555d778f9b9a3a1d553b9c3b8f7dd6a3394ac82df1433b60a69c055d47p': {
    name: 'Petro Huge',
    userID: '48e69555d778f9b9a3a1d553b9c3b8f7dd6a3394ac82df1433b60a69c055d47p',
    picture: 'petro huge.jpg',
    dob: '1856-12-20'
  },
  '48e69555d778f9b9a3a1d553b9c3b8f7dd6a3394ac82df1433b60a69c055d55j': {
    name: 'Mark Henry',
    userID: '48e69555d778f9b9a3a1d553b9c3b8f7dd6a3394ac82df1433b60a69c055d55j',
    picture: 'mark-henry.jpg',
    dob: '2005-12-29'
  }
}

我需要从一个异步的 api 中获取图片，所以在 reduce 方法中使用了 async await。这里的问题是它总是显示为 Promise pending。如果这是一个对象数组，那么我可以返回 Promise.all，但由于这是包含对象的对象，我如何在 reduce 方法中继续执行此操作？我需要完全相同的预期输出。

有人可以帮我解决这个问题吗？任何帮助将不胜感激。

Answer 1

要在异步迭代项目时使用reduce，您必须让从回调传递到回调的累加器成为Promise。虽然这是可能的，但它会让事情变得非常难以阅读，并引入一些不必要的语法噪音。

改用普通的for 循环：

const filteredArr = {};
for (const item of LargeArr.Items) {
  const { attributes: { dob, name, picture} = { dob: null, name: null, picture: null } } = item;
  const pic = picture ? await getPic(picture) : null;
  filteredArr[userID] = { name, uesrID, pic, dob };
}

如果你真的想走reduce 路线：

LargeArr.Items.reduce(
  (acc, { attributes: { dob, name, picture} = { dob: null, name: null, picture: null }, userID }) => {
    return acc.then(async (acc) => {
      let pic = null;
      if (picture) { pic = await getPic(picture); } // async here
      acc[userID] = { name, userID, pic, dob };
      return acc;
    });
  }, Promise.resolve({})
)
  .then((filteredArr) => {
    // do stuff with filteredArr
  });

除非getPic 调用需要串行进行，否则您可以考虑使用Promise.all 来一次遍历整个数组，而不是等待前一个 Promise 的解决方案之后再进行下一个。

如果你的 API 可以处理Promise.all:

const filteredArr = {};
await Promise.all(LargeArr.Items.map(async (item) => {
  const { attributes: { dob, name, picture} = { dob: null, name: null, picture: null } } = item;
  const pic = picture ? await getPic(picture) : null;
  filteredArr[userID] = { name, uesrID, pic, dob };
}));