Napojenie Reactu na backend: Čítanie a zapisovanie dát z/do servera

Vytváranie interaktívnych webových aplikácií pomocou Reactu často vyžaduje komunikáciu s backendovým serverom. V tomto článku sa pozrieme na to, ako napojiť React aplikáciu na externé API a aké nástroje môžeme použiť na správu týchto požiadaviek. Porovnáme fetch a axios, dve najpoužívanejšie metódy pre prácu s API v JavaScripte, a zároveň sa zameriame na riešenie bežných problémov, ktoré sa môžu pri práci s nimi vyskytnúť.

1. Rozdiely medzi fetch a axios, základné ukážky použitia

fetch je natívna metóda JavaScriptu, ktorá sa používa na posielanie HTTP požiadaviek. Je veľmi jednoduchá na použitie, ale vyžaduje niekoľko dodatočných krokov na spracovanie odpovedí (napr. prevod odpovedí na JSON formát). Na druhej strane axios je populárna knižnica, ktorá poskytuje viac funkcií a jednoduchosť pri práci s požiadavkami.

Príklad použitia `fetch`:

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

Príklad použitia `axios`:

import axios from 'axios';

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

Rozdiely medzi týmito dvoma metódami sú v tom, že axios spracováva odpovede automaticky, čo šetrí čas a zjednodušuje kód. Na druhej strane fetch je natívna funkcia, ktorá nevyžaduje inštaláciu ďalších knižníc.

2. Riešenie bežných chýb (CORS, timeout, nedostupný server)

Pri práci s externými API sa môžete stretnúť s rôznymi chybami. Jednou z najčastejších je CORS (Cross-Origin Resource Sharing), ktorá zabraňuje vášmu prehliadaču v prístupe k údajom z iných domén.

Ak sa stretávate s chybou CORS, musíte zabezpečiť, aby server povolil požiadavky z vášho zdroja. To sa dá nastaviť na strane servera pridaním správnych hlavičiek CORS.

Ďalšou bežnou chybou je timeout, ktorý sa objaví, ak server nereaguje dostatočne rýchlo. V prípade axios je možné nastaviť maximálny časový limit pre požiadavky:

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

Ak server nie je dostupný, oba nástroje (fetch aj axios) hodia chybu, ktorú môžeme spracovať pomocou metódy catch alebo try/catch blokov v prípade async/await.

3. Spracovanie JSON dát – zobrazovanie výsledkov na obrazovke

Väčšina API dnes vracia dáta v JSON formáte. Po získaní týchto dát ich musíte spracovať a zobraziť na stránke. Môžete to urobiť pomocou React komponenty, ktorá bude zobraziť výsledky vo forme tabuľky alebo zoznamu.

Online kurz programovania v Jave

Programovanie nie je ťažké! Kódenie vlastných appiek v nástroji Java je veľká zábava. Do konca leta programujete vy sami alebo vaše bystré deti svoje prvé appky

Prvá hodina zadarmo!

7dňová výzva programovania Webu

Budete vedieť vytvárať pekné weby koncom budúceho týždňa? Áno, dá sa to! Radi vám s tým pomôžeme. Stačí prijať Sedemdňovú výzvu a rezervovať si tento kurz

Prvá hodina zadarmo!

Příklad spracovania JSON dát:

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

4. Bezpečnostné aspekty (tokeny, základné princípy autentifikácie)

Pri práci s API je veľmi dôležité zabezpečiť bezpečnosť vašich aplikácií. Jedným z najbežnejších spôsobov, ako to dosiahnuť, je používanie tokenov na autentifikáciu. Tieto tokeny sa zvyčajne posielajú v hlavičke požiadavky a slúžia na overenie používateľa.

Příklad použitia tokenu pri axios požiadavke:

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

5. Práca s hernými štatistikami: ukladanie, načítanie a vizualizácia v Reacte

Ak vytvárate hru alebo aplikáciu, ktorá vyžaduje uchovávanie štatistík, môžete tieto dáta ukladať do databázy alebo do lokálneho úložiska. V Reacte môžete tieto dáta načítavať pomocou API a zobraziť ich pomocou komponentov.

Příklad zobrazenia herných štatistík:

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

Záver

Práca s API je nevyhnutná pre každú modernú webovú aplikáciu. React vám umožňuje jednoducho napojiť aplikáciu na externé API, či už pomocou fetch alebo axios. Pre hlbšie pochopenie tejto problematiky a ďalších praktických zručností v Reacte, odporúčame vám náš kurz REACT – Praktický úvod do Reactu bez predchádzajúcich znalostí, kde sa naučíte, ako pracovať s externými API a vytvoriť interaktívne aplikácie.

Kurz UML - Základy jazyka UML v nástroji Enterprise Architect