Napojení Reactu na backend: Čtení a zapisování dat z/do serveru

Vytváření interaktivních webových aplikací pomocí Reactu často vyžaduje komunikaci s backendovým serverem. V tomto článku se podíváme na to, jak napojit React aplikaci na externí API a jaké nástroje můžeme použít pro správu těchto požadavků. Porovnáme fetch a axios, dvě nejpoužívanější metody pro práci s API v JavaScriptu, a zároveň se zaměříme na řešení běžných problémů, které se mohou při práci s nimi vyskytnout.

1. Rozdíly mezi fetch a axios, základní ukázky použití

fetch je nativní metoda JavaScriptu, která se používá pro posílání HTTP požadavků. Je velmi jednoduchá na použití, ale vyžaduje několik dalších kroků pro zpracování odpovědí (např. převod odpovědí na JSON formát). Na druhé straně axios je populární knihovna, která nabízí více funkcí a jednodušší práci s požadavky.

Ukázka použití fetch:

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log('Chyba:', error));

Ukázka použití axios:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.log('Chyba:', error));

Rozdíly mezi těmito dvěma metodami spočívají v tom, že axios automaticky zpracovává odpovědi, což šetří čas a zjednodušuje kód. Na druhé straně fetch je nativní funkce, která nevyžaduje instalaci dalších knihoven.

2. Řešení běžných chyb (CORS, timeout, nedostupný server)

Při práci s externími API se můžete setkat s různými chybami. Jednou z nejběžnějších je CORS (Cross-Origin Resource Sharing), která brání vašemu prohlížeči v přístupu k údajům z jiných domén.

Pokud se setkáte s chybou CORS, musíte zajistit, aby server povolil požadavky z vašeho zdroje. To se dá nastavit na straně serveru přidáním správných hlaviček CORS.

Další běžnou chybou je timeout, který nastává, pokud server nereaguje dostatečně rychle. U axios je možné nastavit maximální časový limit pro požadavky:

axios.get('https://api.example.com/data', { timeout: 5000 })

Pokud server není dostupný, obě metody (fetch a axios) vrátí chybu, kterou můžeme zpracovat pomocí metody catch nebo try/catch bloků v případě async/await.

3. Zpracování JSON dat – zobrazování výsledků na obrazovce

Většina API dnes vrací data v JSON formátu. Po získání těchto dat je nutné je zpracovat a zobrazit na stránce. To můžete provést pomocí React komponenty, která zobrazí výsledky ve formě tabulky nebo seznamu.

Ukázka zpracování JSON dat:

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      this.setState({ data: data });
    })
    .catch(error => console.log('Chyba:', error));

4. Bezpečnostní aspekty (tokeny, základní principy autentifikace)

Při práci s API je velmi důležité zajistit bezpečnost vašich aplikací. Jedním z nejběžnějších způsobů, jak toho dosáhnout, je použití tokenů pro autentifikaci. Tyto tokeny se obvykle posílají v hlavičce požadavku a slouží k ověření uživatele.

Ukázka použití tokenu při axios požadavku:

axios.get('https://api.example.com/data', {
    headers: {
      'Authorization': 'Bearer ' + token
    }
  })

5. Práce s herními statistikami: ukládání, načítání a vizualizace v Reactu

Pokud vytváříte hru nebo aplikaci, která vyžaduje uchovávání statistik, můžete tato data ukládat do databáze nebo do lokálního úložiště. V Reactu můžete tato data načítat pomocí API a zobrazit je pomocí komponent.

Ukázka zobrazení herních statistik:

fetch('https://api.example.com/stats')
    .then(response => response.json())
    .then(stats => this.setState({ stats: stats }))
    .catch(error => console.log('Chyba:', error));

Závěr

Práce s API je nevyhnutná pro každou moderní webovou aplikaci. React vám umožňuje jednoduše napojit aplikaci na externí API, ať už pomocí fetch nebo axios. Pro hlubší pochopení této problematiky a další praktické dovednosti v Reactu doporučujeme náš kurz REACT – Praktický úvod do Reactu bez předchozích znalostí, kde se naučíte, jak pracovat s externími API a vytvářet interaktivní aplikace.

Viac informacií preberáme na kurze:

Kurz REACT - Praktický úvod do Reactu bez predchádzajúcich znalostí

Marián Knězek