即使在等待 Promise.all() 也有待处理的承诺

Question

我很难理解为什么在等待Promise.all() 之后我仍然有未决的承诺。

在下面的示例中，我使用 .map() 对数组的每个元素调用异步函数来创建一个 Promise 数组。

现在，为什么承诺仍然显示为待处理？我现在（错误）理解它的方式：

• 一旦来自storeData() 的承诺解决，then() 就会触发
• storeData()resolves 一旦 newDataArray 返回
• 一旦promisesArray 中的所有承诺都已解决或第一个承诺被拒绝，newDataArray 就会返回。

storeData(OldDataArray).then(values => console.log(values))
// console shows:
// { id: 1, data: Promise { <pending> } },
// { id: 2, data: Promise { <pending> } }

const storeData = async (OldDataArray) => {
  try {
      const promisesArray = OldDataArray.map((item) => {
      let newData = downloadMoreDetails(item.id, item.group); //async function, see below
      return {
        id: item.id,
        data: newData,
      };
    });
    const newDataArray = await Promise.all(promisesArray);  // <-- I'm awaiting all promises to complete before assigning to newDataArray
    return newDataArray;
  } catch (error) {
    console.log(error)
  }
};

const downloadMoreDetails = async (id, group) => {
  const response = await fetch(
    `example.com/id/group.xml`
  );
  if (!response.ok) {
    throw new Error(`HTTP error ${response.status}`);
  }

  const str = await response.text();
  const json = convert.xml2json(str, {
    compact: true,
    spaces: 2,
  });
  return json;
};

Answer 1

newData 是一个承诺，但您正在等待{id: item.id, data: newData } 的数组。 Promise.all() 不会在这些对象内部查找承诺并等待该承诺。它只看到一个普通对象数组，这意味着它无事可做。你可以通过这样做来解决这个问题：

const storeData = async (OldDataArray) => {
  try {
    const promisesArray = OldDataArray.map(async (item) => {
        let newData = await downloadMoreDetails(item.id, item.group); //async function, see below
        return {
          id: item.id,
          data: newData,
        };
    });
    return Promise.all(promisesArray);
  } catch (error) {
    // log and rethrow error so the caller gets the rejection
    console.log(error);
    throw error;
  }
};

这会将.map() 回调更改为async。这有两件有益的事情。首先，这意味着来自.map() 的结果数组将是一个promise 数组，因为async 回调总是返回一个promise。其次，它允许您在回调中使用await，这样您就可以使用实际数据填充返回的对象，而不是使用承诺。

---

注意，您也可以在不添加 async/await 的情况下这样做：

const storeData = (OldDataArray) => {
    const promisesArray = OldDataArray.map((item) => {
       return downloadMoreDetails(item.id, item.group).then(newData => {
          return {
            id: item.id,
            data: newData,
          };
       });
    });
    return Promise.all(promisesArray).catch(error => {
      // log and rethrow error so the caller gets the rejection
      console.log(error);
      throw error;
    });
};

在此版本中，您直接从 .map() 回调返回一个承诺，并确保该承诺解析为您的数据对象。