不确定如何解决未决的承诺？

Question

我正在循环浏览一些数据并获取单个导航项。

如果我在 getNavItems 函数中 return 之前 console.log(navItems)，它会记录我期望的所有内容。

但是，如果我在 getFooterData 中的 return 之前记录 footerData，我会 return 在我的项目中有一个未解决的承诺

[
  { heading: 'Heading 1', items: Promise { <pending> } },
  { heading: 'Heading 2', items: Promise { <pending> } },
  { heading: 'Heading 3', items: Promise { <pending> } },
]

我期待的是：

[
  { heading: 'Heading 1', items: [ {data: 1}, {data: 2}, {data: 3} ] },
]

const getNavitems = async (navItemList) => {
  const navItemIds = navItemList.map(({ sys: { id } }) => id);

  const navItemData = await Promise.all(
    navItemIds.map((id) => client.getEntry(id))
  );

  const navItems = navItemData.map((item) => item.fields);

  return navItems;
};

const getFooterData = async () => {
  const footerDataCollection = await client.getEntry('abcxyz123');

  const footerData = Object.entries(footerDataCollection.fields.sections).map(
    (item) => {
      return {
        heading: item[1].fields.heading,
        items: (() => getNavitems(item[1].fields.item_list))()
      };
    }
  );

  return footerData;
};

任何帮助都会很棒，因为我已经为此苦苦思索了几个小时！

Answer 1

在items: (() => getNavitems(item[1].fields.item_list))()中，您需要插入另一个await。

items: (async () => await getNavitems(item[1].fields.item_list))()

getNavItems 是一个异步函数。因此，您必须使用 await 来获取 return 值。

Answer 2

一个使用循环的解决方案。（Array.prototype.map 对于 await 很棘手）

我没有测试过这个，因为我没有办法。

const getNavitems = async (navItemList) => {
  const navItemIds = navItemList.map(({ sys: { id } }) => id);

  const navItemData = await Promise.all(
    navItemIds.map((id) => client.getEntry(id))
  );

  const navItems = navItemData.map((item) => item.fields);

  return navItems;
};

const getFooterData = async () => {
  const footerDataCollection = await client.getEntry('abcxyz123');

  const footerData = Object.entries(footerDataCollection.fields.sections);

  const items = await Promise.all(footerData.map(item => getNavitems(item[1].fields.item_list)));

  for (let i = footerData.length; i--;) {
      footerData[i] = {
          heading: footerData[i][1].fields.heading,
          items: items[i]
      }
  }

  return footerData;
};

Answer 3

也许 items: (() => getNavitems(item[1].fields.item_list))() 试试 items: await getNavitems(item[1].fields.item_list)。匿名函数到底有什么用？

const footerData = await Promise.all(Object.entries(footerDataCollection.fields.sections).map(
    async (item) => {
      return {
        heading: item[1].fields.heading,
        items: await getNavitems(item[1].fields.item_list)
      };
    }
  ));

不确定如何解决未决的承诺？

Unsure how to resolve a pending promise?

javascript

async-await

ecmascript-6

es6-promise

map-function