如何使用async/await等待获取api完成

Question

我有这个Javascript程序，它将从本地服务器加载图像到数据传输，然后将其文件分配给我的输入类型文件，但我真的不知道如何等待fetch API完成，然后再执行程序的后面部分。我希望你能帮我解决问题，因为我是个初学者。

function image_select(BHID) {
all_fileBuffer[BHID] = new DataTransfer();
//add images from database to filebuffer
setTimeout(async function () {
$("div#container-"+BHID+" img").each(async function (e) {
await fetch($(this).attr('src'))
.then(res => res.blob())
.then(blob => {
all_fileBuffer[BHID].items.add(new File([blob], $(this).attr('id'), blob));
})

}); 
}, 1000);
all_attachments[BHID] = document.getElementById("image-" + BHID).files; // <-- reference your file input here
// append the file list to an array iteratively
for (let i = 0; i < all_attachments[BHID].length; i++) {
// Exclude file in specified index
all_fileBuffer[BHID].items.add(all_attachments[BHID][i]);
}
document.getElementById('image-' + BHID).files = all_fileBuffer[BHID].files;
all_image[BHID] = document.getElementById('image-' + BHID).files;
all_images[BHID] = [];
for (i = 0; i < all_image[BHID].length; i++) {
all_images[BHID].push({
"name": all_image[BHID][i].name,
"url": URL.createObjectURL(all_image[BHID][i]),
"file": all_image[BHID][i],
})
}
document.getElementById('container-' + BHID).innerHTML = "";
document.getElementById('container-' + BHID).innerHTML = image_show(BHID);

console.log(all_fileBuffer[BHID].files); 
}

Answer 1

我不太明白在提取后需要使用代码的哪一部分，但多个异步函数的处理方式与类似

async function main () {
await Promise.all([1, 2, 3].map(x => 
new Promise((resolve) => 
setTimeout(resolve, x*1000)))
)
console.log('further code')
}

所以在你的情况下，它看起来像这样：

async function imageSelect () {
// ...
await Promise.all([
$("div#container-"+BHID+" img").map(async function (e) {
await fetch($(this).attr('src'))
.then(res => res.blob())
.then(blob => all_fileBuffer[BHID].items.add(
new File([blob], $(this).attr('id'), blob));
})
]);

console.log('fetch done')
// ...
}