Lekce 12 - AJAX v React a hook useEffect()

V minulé lekci, Představení PokéAPI a práce s AJAX v React, jsme si představili PokéAPI, doplněk JSON formatter pro Chrome a způsoby práce s AJAX v React.

V dnešním React tutoriálu stáhneme data z webového API pomocí React a hooku useEffect(). Představíme si také knihovnu Axios.

Stažení seznamu pokémonů pomocí fetch()

Prvně si aplikaci vytvoříme pomocí modernějšího způsobu získávání dát, kterým je JS funkce fetch().

API utils – api.js

Pro stažení dat z API pomocí fetch() si vytvoříme jednoduchý wrapper, abychom pak mohli všechna volání API v aplikaci provádět jediným řádkem kódu. Již víme, že tyto pomocné funkce, které se netýkají přímo uživatelského rozhraní, vkládáme do složky utils/. Tuto složku si tedy ve složce src/ s naším projektem vytvoříme. A v ní si vytvoříme nový soubor api.js s následujícím obsahem:

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

Funkce apiGet() je asynchronní (nechceme, aby se

...konec náhledu článku...
Pokračuj dál