12. diel - AJAX v React a hook useEffect()

V minulej lekcii, Predstavenie PokéAPI a práca s AJAX v React, sme si predstavili PokéAPI, doplnok JSON formatter pre Chrome a spôsoby práce s AJAX v React.

V dnešnom React tutoriále stiahneme dáta z webového API pomocou React a hooku useEffect(). Predstavíme si aj knižnicu Axios.

Stiahnutie zoznamu pokémonov pomocou fetch()

Najprv si aplikáciu vytvoríme pomocou modernejšieho spôsobu získavania dát, ktorým je JS funkcia fetch().

API utils - api.js

Pre stiahnutie dát z API pomocou fetch() si vytvoríme jednoduchý wrapper, aby sme potom mohli všetky volania API v aplikácii vykonávať jediným riadkom kódu. Už vieme, že tieto pomocné funkcie, ktoré sa netýkajú priamo používateľského rozhrania, vkladáme do priečinka utils/. Tento priečinok si teda v priečinku src/ s naším projektom vytvoríme. A v ňom si vytvoríme nový súbor api.js s nasledujúcim obsahom:

export async function apiGet(url) {
    const response = await fetch(url);
    const data = await response.json();
    return data;
}

Funkcia apiGet() je asynchrónna (nechceme, aby sa

...koniec náhľadu článku...
Pokračuj ďalej