javascript - 使用多个 async/await 调用构建对象
问题描述
我正在使用一个在两个端点上有数据的 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>: {...}}
}
解决方案
getMetaPerArticle 返回一个承诺,因此您需要等待这些承诺解决,然后再尝试映射到 parsedEnDataWithMeta。像这样的东西:
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));
}
};
推荐阅读
- c++ - 是否可以检查变量是否位于 L1/L2/L3 缓存中
- javascript - 无法移动口罩?无法获取掩码元素的 bbox
- postgresql - wal-g backup-push 尝试使用错误的数据库
- php - 有人可以帮我减少我的 php 代码吗?
- javascript - RXJS Observable MergeMap 链
- snakemake - Snakemake:如何指定 shell 命令的绝对路径
- python - 多索引失败
- cassandra-3.0 - Cassandra 集群缩减
- python - 查找所有单词,包括带有特殊字符的单词
- excel - Excel VBA - 使用文字编辑器冻结前景