javascript - JavaScript 在 onSubmit 中的循环内获取

Question

如何组织循环console.log(url)后调用的代码？each

$("form").on('submit', (e) => {
    e.preventDefault();
    
    const form = $("form");
    if (!form.checkValidity()) return;
    
    const formData = new FormData(form[0]);

    $(".file-upload-wrapper img.card-img").each(async function (i) {
        
        const src = $(this).attr("src");
        const fileName = $(this).attr("data-filename");

        const response = await fetch(src);
        const data = await response.blob();
        formData.append("file", data, fileName);
        
        console.log(src);   
    })

    const url = $(form).attr("action");
    console.log(url);    
})

Answer 1

await在循环内部工作，而不是在像和for..of这样的同步数组方法内部。我怀疑它在 jQuery 中也不起作用，因为只有内部函数是; 外部代码保持同步，因此您将获得最后的代码。尝试使用循环：.forEach().map()$.each()asyncconsole.log(url)for...of

$("form").on('submit', async (e) => { // async here
    e.preventDefault();
    
    const form = $("form");
    if (!form.checkValidity()) return;
    
    const formData = new FormData(form[0]);

    const $images = $(".file-upload-wrapper img.card-img");
    
    for (let image of $images) {
        const $image = $(image);
        const src = $image.attr("src");
        const fileName = $image.attr("data-filename");
    
        const response = await fetch(src);
        const data = await response.blob();
        formData.append("file", data, fileName);
        
        console.log(src);   
    }

    const url = $(form).attr("action");
    console.log(url);    
});