使用多個異步/等待調用構建對象

Question

我正在使用一個在兩個端點上都有數據的api：

• / news可以獲取包含少量屬性的文章列表
• / news / {id} / metadata獲取文章的所有屬性

實際上，我需要獲取所有屬性，並且計划構建一個主對象來驅動UI。

當前功能：

• getNews：一個異步/等待功能，可從/ news成功獲取文章列表
• getMetaPerArticle：另一個異步/等待函數，它帶有一個ID並調用/ news / {id} / metadata

行為：

• 我運行getNews異步函數並等待響應
• 當響應通過時，我在響應數組上映射並在數組中的每個項目上運行getMetadata函數
• 一旦getMetadata完成，結果將存儲到常量中並分配給element.metadata

問題 ：-我的兩個函數都可以解析，但是我的最終對象包含Promise.resolve對象。 對象具有正確的值。

碼

const getNews = async options => {
    try {
      const { data } = await axios(options);
      const parsedEnDataWithMeta = parsedEnData.map(article => {
        const mergedArticleWithMeta = {
          ...article,
          ...getMetaPerArticle(article.id)
        };
        return mergedArticleWithMeta;
      });
    } catch (getNewsError) {
      dispatch(receiveNewsError(getNewsError));
    }
  };



const getMetaPerArticle = async articleID => {
    const axiosOptions = {
      method: "GET",
      url: `url`,
    };
    try {
      const response = await axios(axiosOptions);
      return response.data;
    } catch (err) {
      console.error(err);
      dispatch(receiveNewsError(err));
    }
  };

輸出量

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {
    abstract: "",
    ...
    metadata: Promise {<resolved>: {...}}
}

Answer 1

getMetaPerArticle返回了一個Promise，因此在嘗試映射到parsedEnDataWithMeta之前，您需要等待這些Promise解析。 像這樣：

const getNews = async options => {
  try {
    const { data } = await axios(options);
    const metadataPromises = data.map(article => getMetaPerArticle(article.id));
    const metadata = await Promise.all(metadataPromises);
    const parsedEnDataWithMeta = data.map((article, i) => ({
      ...article,
      ...metadata[i]
    });
  } catch (getNewsError) {
    dispatch(receiveNewsError(getNewsError));
  }
};

Answer 2

您的問題是getMetaPerArticle返回一個Promise，因此您需要在其中添加一個await ，並將箭頭函數標記為async 。

const parsedEnDataWithMeta = parsedEnData.map(async article => {
  const mergedArticleWithMeta = {
    ...article,
    ...await getMetaPerArticle(article.id)
  };
  return mergedArticleWithMeta;
});

之后， parsedEnDataWithMeta將保存一個Promises列表，因此您需要等到所有它們都使用Promise.all解析Promise.all ：

const parsedEnDataWithMeta = await Promise.all(parsedEnData.map(async article => {
  const mergedArticleWithMeta = {
    ...article,
    ...await getMetaPerArticle(article.id)
  };
  return mergedArticleWithMeta;
}));

如果您需要更頻繁地使用它，則可以定義一個處理承諾的map函數：

function promiseMap( array, callback ) {
  return Promise.all(array.map(callback))
}


const parsedEnDataWithMeta = await promiseMap(parsedEnData, async article => {
  const mergedArticleWithMeta = {
    ...article,
    ...await getMetaPerArticle(article.id)
  };
  return mergedArticleWithMeta;
});