javascript - 使用多个异步/等待调用构建对象

Question

我正在使用一个在两个端点上都有数据的 api:

• /news 获取包含少量属性的文章列表
• /news/{id}/metadata 获取一篇文章的所有属性

我实际上需要获取所有属性，并且我计划构建一个主对象来驱动我的 UI。

当前函数:

• getNews:一个 async/await 函数，成功从/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));
  }
};