Непонятен порядок выполнения функций в js?

Question

[Suleymanov]

let data = [];

        async function getData() {
            let result = await fetch(' http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}');
            if (result.ok) {
                data.push(...await result.json());
            } else {
                throw new Error
            }
            console.log('1');
        }

        let id__header = document.querySelector('.id__header'),
            firstName = document.querySelector('.firstName'),
            lastName = document.querySelector('.lastName'),
            email = document.querySelector('.email'),
            phone = document.querySelector('.phone');

        function createDataCells(arr) {
            for (let i = 0; i < arr.length; i++) {
                id__header.insertAdjacentHTML('beforeend', `<div>${arr[i].id}</div>`);
                firstName.insertAdjacentHTML('beforeend', `<div>${arr[i].firstName}</div>`);
                lastName.insertAdjacentHTML('beforeend', `<div>${arr[i].lastName}</div>`);
                email.insertAdjacentHTML('beforeend', `<div>${arr[i].email}</div>`);
                phone.insertAdjacentHTML('beforeend', `<div>${arr[i].phone}</div>`);
            }
            console.log('2');
        };

            getData();

            setTimeout(() => createDataCells(data), 0);

Почему createDataCells выполняется раньше getData, если getData это микрозадача, которая должна выполнится перед setTimeout

Comments

[DogoWor]

Ну например потому что JS не однопоточный, а getData асинхронная, т.е. идет в отдельном потоке (а не только отдельном от ui)
Поэтому не раньше. А просто параллельно
И естественно создать элементы в DOM куда быстрее чем что-то по сети делать
await используй

[Suleymanov]

DogoWor, тогда для чего нужен await? Разве не для того чтобы ждать результата?

[DogoWor]

Suleymanov, для этого и нужен, но где? Он у тебя внутри getData, поэтому код внутри getData будет выполняться последовательно, а сам вызов getData идет без await, поэтому последовательно.

Вероятно при попытке добавить await к главному вызову getData у тебя возникнет проблема - ты вызываешь getData не из асинхронной функции, а просто из главного контекста. В таком случае await использовать (почему-то) запрещено. Но ты можешь завернуть весь код в асинхронную функцию (я бы назвал ее main, по образцу точки входа в программах на Си) и вызвать main без async. Тогда все что внутри main, будет идти последовательно, сначала getData, потом тот таймаут. А если что-то добавить после этого вызова main, вне main, то оно будет идти параллельно. То есть await работает только на своем уровне вложенности.

[Сергей delphinpro]

DogoWor,

Ну например потому что JS не однопоточный,

https://www.geeksforgeeks.org/why-javascript-is-a-...
https://russianblogs.com/article/6175476088/

[WbICHA]

DogoWor,

Ну например потому что JS не однопоточный, а getData асинхронная, т.е. идет в отдельном потоке

А такой жс с вами в одной комнате?

[DogoWor]

WbICHA, в основном, да, ошибка вышла. Можно сделать асинхронную функцию с каким-то долгим циклом, вызвать ее без await, а потом например сделать alert. Он сработает только тогда, когда цикл выполнится. Т.е. все, что находится в коде на JS, выполняется в одном потоке.
Однако, функции самого языка, такие как fetch, могут спокойно выполняться в отдельных потоках, причем не в одном фоновом, а именно в нескольких отдельных. Это отличает его от "абсолютно однопоточного" Tarantool, где почти все функции и методы, в том числе самого языка и стандартной библиотеки (я про хранимки, которые пишутся на Lua), - блокирующие.

Answer 1

[IvanU7n]

она и вызывается раньше, но т.к. в ней есть await, то окончание будет когда получится

чтобы оно работало как нужно, можно сделать что-то типа getData().then(() => createDataCells(data));

Comments

[Suleymanov]

Спасибо