JS Ошибка в синхронности

Question

Написал код, который берет данные из формы и затем отправляет POST запросы обновляя счетчик (сколько обработано строк). Форму счетчика пока не прячу.

    function counter_shopify_row(data, count) {
        $('#counter-shopify-row').html( count ); //какая запись обрабатывается
        const request = new XMLHttpRequest();
        const url = "{{ route('admin.catalog.product.shopifyImport') }}";
        const params = "data=" + encodeURIComponent(data); // здесь еще параметры, но я их убрал

        request.open("POST", url, false);

        request.setRequestHeader('X-CSRF-TOKEN', $( "input[name*='_token']" ).val());
        request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

        request.addEventListener("readystatechange", () => {
            if(request.readyState === 4 && request.status === 200) {
               console.log(request.response);
            }
            else {
               console.log('err', xhr.responseText)
            }
        });

        request.send(params);
        return new Promise((resolve, reject) => resolve(1));

    }

    async function processArray(data) {
        for (let i = 0; i < data.length; i++) {
            await counter_shopify_row( data[i].value, i + 1 );
        }
    }

    window.onload = function () {
        var a = document.getElementById('shopify-looks-good');

        a.onclick = function(event) {
            event.preventDefault();
            $('.load-status-modul').show(); //показываем диалоговое окно

            var data = document.forms[0].elements["data[]"];
            $('#all-shopify-row').html(data.length); //сколько всего записей
           
            processArray(data);
        }
    }

Итог: выполняются запросы и только потом появляется диалоговое окно со счетчиком. Помогите найти ошибку в коде

Answer 1

const counter_shopify_row = async (data, count) => {

    const counterShopifyRow = document.querySelector('#counter-shopify-row');

    if (counterShopifyRow) {
        counterShopifyRow.innerHTML = count;
    }

    const url = "{{ route('admin.catalog.product.shopifyImport') }}";
    const token = document.querySelector('input[name*="_token"]').value;

    //@TODO remake to json-data
    const body = "data=" + encodeURIComponent(data); //JSON.stringify(data)

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded', //'application/json'
            'X-CSRF-TOKEN': token,
        },
        body: body
    });

    return await response.text(); // response.json()
};

document.addEventListener('DOMContentLoaded', () => {
    const shopifyLooksGood = document.querySelector('#shopify-looks-good');

    if (shopifyLooksGood) {
        shopifyLooksGood.addEventListener('click', async (event) => {
            event.preventDefault();

            $('.load-status-modul').show(); //@TODO  remove jquery

            const data = document.forms[0].elements["data[]"];

            document.querySelector('#all-shopify-row').innerHTML = data.length

            let counter = 0;

            try {
                for (let item of data) {
                    await counter_shopify_row(item.value, ++counter);
                }
            } catch (e) {
                console.log(`Ошибка при выполнении запроса №${counter}`)
            }
        })
    }
});

БЛОГ НА HUSL

JS Ошибка в синхронности

Ответы (1 шт):