我正在使用一个api,它有两个端点上的数据:
我实际上需要获取所有属性,并且我计划构建一个主对象来驱动我的UI。
目前的职能:
行为:
问题: - 我的两个函数都解析了,但我的最终对象包含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返回一个promise,因此在尝试映射到parsedEnDataWithMeta之前,您需要等待这些promises解析。像这样的东西:
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));
}
};
你的问题是getMetaPerArticle
返回一个Promise,所以你需要在它中添加一个await
,并将箭头函数标记为async
。
const parsedEnDataWithMeta = parsedEnData.map(async article => {
const mergedArticleWithMeta = {
...article,
...await getMetaPerArticle(article.id)
};
return mergedArticleWithMeta;
});
之后parsedEnDataWithMeta
将保留一份Promises列表,所以你需要等待,直到所有这些都使用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;
});