我有下面的代码,它的工作:
interface MyImages {
apple: HTMLImageElement,
banana: HTMLImageElement,
carrot: HTMLImageElement
}
async function fetchImages(): Promise<MyImages> {
const images = await Promise.all([
asyncImageLoad("/images/apple.png"),
asyncImageLoad("/images/banana.png"),
asyncImageLoad("/images/carrot.png")
]);
return {
apple: images[0],
banana: images[1],
carrot: images[2]
};
}
然而,它有点冗长,而且容易出错,因为你必须把数组索引和正确的元素匹配起来。
我宁愿这样做:
async function fetchImages(): Promise<MyImages> {
return {
apple: await asyncImageLoad("/images/apple.png"),
banana: await asyncImageLoad("/images/banana.png"),
carrot: await asyncImageLoad("/images/carrot.png")
};
}
这要简洁得多,不易出错,* 但 * 不幸的是,它会同步查询每个映像。
也就是说,不是一次发送所有请求,而是首先查询苹果,等待它返回,然后查询香蕉,等待它返回,最后查询胡萝卜图像。
有没有办法让后者的人体工程学与前者的性能兼得?
1条答案
按热度按时间ovfsdjhp1#
这个函数的替代实现基于@jonrsharpe关于使用
Object.fromEntries
的建议。