Bug #053

🪲 Znajdź buga​

const url =
  "https://swapi.dev/api/films?format=json"

fetch(url)
  .then((res) => res.json())
  .then((data) => {
    // do something with data
  })
  .then((data) => {
    console.log(data)
  })

Chcemy pobrać dane z API (np. listę filmów Star Wars), przetworzyć te dane, a następnie zalogować je do konsoli.

Czy ten plan zadziała w powyższym przykładzie?

🧪 Rozwiązanie​

const url =
  "https://swapi.dev/api/films?format=json"

fetch(url)
  .then((res) => res.json())
  .then((data) => {
    // do something with data
    return data
  })
  .then((data) => {
    console.log(data)
  })

W przykładzie z błędem, do konsoli zalogowane zostanie undefined.

Dzieje się tak, ponieważ w poprzednim wywołaniu metody then(), nie zwróciliśmy żadnej wartości.

Obietnica (promise) wypełniła się zwracając wartość undefined, tak samo, jak gdybyśmy wywołali standardową funkcję, która nic nie zwraca.

Podobna sytuacja miałaby miejsce z res.json(), gdybyśmy nie zwrócili danych z tego wywołania. W kolejnym wywołaniu, tam gdzie chcemy dane przetworzyć, zamiast danych dostalibyśmy undefined.

Brak nawiasów w naszym przykładzie powoduje, że wartość z anonimowej funkcji strzałkowej (res) => res.json() jest automatycznie zwracana w przeciwieństwie do sytuacji (res) => { res.json() }.

🎢 Plac zabaw​

📑 Linki​

• Promise.prototype.then() - JavaScript | MDN
• Using promises - JavaScript | MDN

❤️ Podobają Ci się bugi JS?​

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