Bug #036

🪲 Znajdź buga​

async function getData() {
  const url =
    "https://api.spacexdata.com/v4/history"
  const response = await fetch(url)
  const json = await response.json()

  return json
}

async function processData() {
  const data = getData()
  console.log(data)
}

processData()

Czy dane zostaną poprawnie pobrane z API i przetworzone?

Co zostanie zalogowane do konsoli?

🧪 Rozwiązanie​

async function getData() {
  const url = "https://api.spacexdata.com/v4/history"
  const response = await fetch(url)
  const json = await response.json()

  return json
}

async function processData() {
  const data = await getData()
  console.log(data)
}

processData()

W błędnym przykładzie do konsoli zostanie zalogowany obiekt Promise.

Nie mamy w nim dostępu do danych, bo obietnica nie została wypełniona.

Aby rozwiązać ten problem musimy dodać brakujące słowo kluczowe await przed wywołaniem getData().

Moglibyśmy się też dostać do pobranych danych poprzez wywołanie metody then() na obiekcie Promise.

getData().then(resp => console.log(resp)) zwróciłoby nam dane, ale nie zostałyby one przypisane do stałej data.

Poprzez użycie konstrukcji await getData(), wykonywanie kodu zaczeka na pobranie danych i przypisze je do stałej data. Dzięki temu będziemy je mogli przetworzyć w dalszej części funkcji np. logując je do konsoli.

🎢 Plac zabaw​

📑 Linki​

• async function - JavaScript | MDN
• Promise.prototype.then() - JavaScript | MDN

❤️ Podobają Ci się bugi JS?​

Podziel się linkiem ze znajomymi:
https://codisity.pl/100-bugow-js