Блог

Как я могу организовать свой код, который 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);    
})
 

await работает внутри for..of циклов, а не внутри методов синхронного массива, таких как .forEach() и .map() . Я подозреваю , что это также не работает внутри jQuery $.each() , потому что работает только внутренняя функция async ; внешний код остается синхронным, так что вы получаете свой последний console.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);    
});