Projekt

Obecné

Profil

Akce

Komunikace se serverem

React reprezentuje pouze View celé aplikace. Je tedy nutné pomocí něj komunikovat se serverem a získavat data, která má vlastně zobrazovat. Odkážu se na code snippet na stránce Formular, kde je celé volání z komponenty.
Následující code snippet reprezentuje triviální service, která volá endpoint serveru. Oddělení komponenty od samotného volání endpointu je dobrá konvence a kód je z mého osobního hlediska více čitelný a lépe rozdělený.

//importujeme konfigurace serveru - kde na co posloucha
import apis from "../lib/global/apis";
//samotna funkce, kterou tato service vystrkuje ven - provolani endpointu, ktery vrati vsechny dokumenty obsahujici
//dotaz v promenne @param searchQuery
//funkce je asynchronni - neblokujici vykonavani kodu mezi jednotlivymi funkcemi
//asynchronni kod zajistuje vykonani jednoho bloku kodu a nasledne preda rizeni dal
//asynchronni funkce neni to stejne jako funkce spustena na novem vlakne
const requestDocuments = async (searchQuery:string) =>{
    //fetch na endpoint serveru, v hlavicce deklarujeme, ze posilame text a metodu (v tomto priade je to GET)
    //fetch take bezi asynchronne, nasladne navrati response serveru v json formatu
    //je nutne na tomto miste take reagovat na HTTP kod odpovedi - pokud dostaneme chybu, je vhodne na to reagovat
    return fetch(`${apis.searchAPI.url}?query=${searchQuery}`, {
        headers: {
            'Content-Type': 'text/html'
        },
        method: apis.searchAPI.method
    }).then(data => data.json())
}
//funkci vystrcime ven
export default requestDocuments;

Aktualizováno uživatelem Jiří Trefil před asi 2 roky(ů) · 2 revizí