我的问题与我看到的示例有关（如下）。该示例加载图像，然后在屏幕上显示它们。据我所知作者的目标是所有图像都将在同一时间加载，但是我不明白异步等待机制如何帮助他实现这一目标？有问题的线是：
imgArr.map（异步img =>等待createImage（img））;
码：
const wait = function (seconds) {
return new Promise(function (resolve) {
setTimeout(resolve, seconds * 1000);
});
};
const imgContainer = document.querySelector('.images');
const createImage = function (imgPath) {
return new Promise(function (resolve, reject) {
const img = document.createElement('img');
img.src = imgPath;
img.addEventListener('load', function () {
imgContainer.append(img);
resolve(img);
});
img.addEventListener('error', function () {
reject(new Error('Image not found'));
});
});
};
const loadAll = async function (imgArr) {
try {
const imgs = imgArr.map(async img => await createImage(img));
const imgsEl = await Promise.all(imgs);
console.log(imgsEl);
imgsEl.forEach(img => img.classList.add('parallel'));
} catch (err) {
console.error(err);
}
};
loadAll(['img/img-1.jpg', 'img/img-2.jpg', 'img/img-3.jpg'])
;
不imgArr.map（异步IMG => AWAIT的createImage（IMG））; 与以下内容完全相同：
for (img of imgArr)
{
await createImage(img);
}
此代码同步创建多个<img>元素并设置其src。在img上设置src会导致浏览器开始下载该图像，并且浏览器可以一次下载多个图像。
唯一的作用await是我们需要知道何时完成下载。每个图像下载都包装在一个Promise中，然后使用组合这些Promise Promise.all。通过等待合并的承诺，一旦所有下载完成，我们就可以恢复我们的代码。
如评论中所述，await中的.map是无用的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句