Array.length zwraca wartosc 0

// Retrieving API data
function getData() {
    let lista = []
    fetch('http://private-1c19e-reactlesson.apiary-mock.com/products').then(function (response) {
        return response.json();
    }).then(function (data) {
        for (let i = 0; i < data.length; i++) {
            lista.push(data[i]);
        }
    }).catch(function () {
        console.log("Booo");
    });
    return lista;
}

// Saving API data in variable
let itemList = getData();
console.log(itemList.length)

Mam problem z tablica obiektow. Gdy wyswietlam ja w consoli wszystko wyglada fajnie i wartosc length jest prawidlowa.
https://i.stack.imgur.com/oIoRj.png

Ale gdy probuje dostac ta wartosc przez array.length to wyswietla sie 0. Kolejną dziwna rzecza sie to ze jak wkleje to w conosole to wysiwetla sie prawidlowo 8
https://i.stack.imgur.com/Tv0Qe.png

@maciekzygmunt: gdy wywolujesz getData() Od razu zwraca ci return lista ktora jest pusta.
Musisz to opakowac w dodatkowe Promise i robic resolve/reject.
Potem robisz

let itemList = await getData();

I wtedy dostaniesz prawidlowy wynik

return response.json();

z tego co rozumiem, to nie jest operacja asynchroniczna, więc nie widzę powodu dlaczego nie zrobić czegoś takiego:

    fetch('http://private-1c19e-reactlesson.apiary-mock.com/products').then(function (response) {
        let data = response.json();
        for (let i = 0; i < data.length; i++) {
            lista.push(data[i]);
        }

// Retrieving API data
function getData() {
  return new Promise((resolve, reject) => {
    let lista = []
    fetch('http://private-1c19e-reactlesson.apiary-mock.com/products').then(function (response) {
        return response.json();
    }).then(function (data) {
        for (let i = 0; i < data.length; i++) {
            lista.push(data[i]);
        }
        resolve(lista)
    }).catch(function (e) {
        reject(e)
    });
  })
}

// Saving API data in variable
try {
  let itemList = await getData();
  console.log(itemList.length)
} catch(e) {
 
}

To API które podałeś nie działa, dałem inne dla przykładu. Spróbuj tak

let itemList = []

const getData = async () => {
  try {
  	const response = await fetch('https://jsonplaceholder.typicode.com/todos/')
    const items = await response.json()
    itemList = items
    
  } catch(error) {
  	console.log(error)
  }
}


const retrieveData = async () => {
  await getData()
  console.log(itemList.length)
}

retrieveData()

I po co to?

        for (let i = 0; i < data.length; i++) {
            lista.push(data[i]);
        }

response.json() jest asynchroniczne i zwraca Promise. Albo użyj go przez then() albo przez await.

Co do pytania o async await. Wszedzie w Twoim kodzie używasz swoich funkcji jakby były synchroniczne, ale problem jest taki, że jak tylko użyjesz asynchronicznej metody (takiej jak fetch()), to Twój kod natychmiast też staje się asynchroniczny.

Ten błąd który widzisz, że masz psuty array, to jest bug przed którym zabezpieczył Cię błąd "await only in async". Ale zamiast podziękować node'owi że Cię uratował przed bugiem, Ty wolałeś go zignorować i zrobić po swojemu.