Jak korzystać z API w React za pomocą Fetch i Axios

API (interfejs programowania aplikacji) to zestaw protokołów, który umożliwia aplikacji wysyłanie żądań do serwera i odbieranie odpowiedzi.

Za pomocą interfejsów API możesz integrować fragmenty oprogramowania ze swoją aplikacją bez drobiazgowej pracy. Ten proces korzystania z interfejsu API w aplikacji jest ogólnie określany jako korzystanie z interfejsu API. Na przykład, jeśli chcesz wyświetlić określoną lokalizację w swojej witrynie, użyjesz interfejsu API Map Google zamiast wdrażać funkcję mapy od podstaw. Dzięki temu interfejsy API zmniejszają obciążenie pracą i oszczędzają czas.

Aby dowiedzieć się, jak korzystać z interfejsów API REST w React za pomocą Fetch i Axios, zbudujesz prostą aplikację React, która pobiera losowy fakt o kotach z interfejsu API po kliknięciu przycisku.

Rodzaje API

Interfejsy API można sklasyfikować według dostępności lub przypadku użycia. Pod względem dostępności interfejsy API mogą być interfejsami publicznymi, prywatnymi, partnerskimi lub złożonymi. Sklasyfikowane zgodnie z ich przeznaczeniem, mogą być: bazodanowe, zdalne, systemy operacyjne lub internetowe interfejsy API. W tym artykule będziemy korzystać z internetowego interfejsu API o nazwie REST (stan reprezentacyjny) API.

Interfejsy API REST umożliwiają pobieranie danych ze źródła za pośrednictwem adresu URL. W React istnieje kilka metod, których można użyć do korzystania z interfejsów API REST. W tym artykule omówiono dwie najpopularniejsze metody, a mianowicie JavaScript Fetch API i oparty na obietnicach klient HTTP Axios.

Związane z: Co to jest REST API i jak możesz pobrać dane do swojej aplikacji lub witryny?

Warunki wstępne

Aby podążać za tym przewodnikiem, powinieneś mieć:

• Podstawowe zrozumienie języka JavaScript.
• Podstawowa wiedza na temat haków React i React.
• NPM zainstalowany lokalnie na twoim komputerze.
• Zainstalowany edytor tekstu lub IDE do wyboru.

Utwórz aplikację React

Najpierw musisz stworzyć aplikację React. Skopiuj następujące polecenie w terminalu, aby skonfigurować środowisko programistyczne React.

npx utwórz-reaguj-app catfact

Po zakończeniu wykonywania polecenia otwórz katfakt folder w edytorze tekstu. Będziesz pisać swój kod w pliku App.js w src folder, więc śmiało usuń niepotrzebny kod.

importuj "./App.css";
funkcja App() {
 powrót (


Naciśnij przycisk, aby uzyskać losowy fakt o kotach!



Zdobądź fakt o kotach



 );
}
eksportuj domyślną aplikację;

Następnie utwórz prosty interfejs użytkownika, który posłuży do wyświetlania losowego faktu o kotach.

w app.js

importuj './App.css';
funkcja App() {
 powrót (


Naciśnij przycisk, aby uzyskać losowy fakt o kotach!



Zdobądź fakt o kotach



 );
}
eksportuj domyślną aplikację;

Aby nadać styl swojej aplikacji, dodaj następujący kod do app.css plik.

@importuj adres URL (' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.Aplikacja {
 rodzina czcionek: „Playfair Display”, szeryfowa;
 margines: 20px 15vw;
}
godz.2 {
 rodzina czcionek: „Playfair Display”, szeryfowa;
 grubość czcionki: 700;
 rozmiar czcionki: 3em;
}
przycisk {
 wypełnienie: 1em 1,2em;
 granica: brak;
 rozmiar czcionki: 1em;
 kolor tła: #131212;
 kolor: #ffffff;
 granica-promień: 0.5em;
 kursor: wskaźnik;
}
przycisk: najedź {
 kolor tła:#3b3b3b;
}

Twoja aplikacja powinna teraz wyglądać tak.

W kolejnych krokach pobierzesz dane z API i wyświetlisz je w aplikacji.

Związane z: Jak stworzyć swoją pierwszą aplikację React z JavaScript?

Zużywanie interfejsów API REST przy użyciu funkcji Fetch

Pobierz interfejs API to interfejs, który umożliwia pobieranie zasobów z interfejsu API za pośrednictwem żądań HTTP. ten aportować() Metoda otrzymuje adres URL ścieżki do zasobu jako obowiązkowy argument i zwraca obietnicę, która może zostać rozwiązana w odpowiedzi.

Podstawowa składnia aportować() metoda jest następująca:

fetch('adres URL do zasobu')
 .then (odpowiedź => // obsłuż odpowiedź)
 .catch (err => // obsługuj błąd)

Implementacja Fetch API

W React Fetch API jest używany w taki sam sposób, jak w zwykłym JavaScript.

aportować(" https://catfact.ninja/fact")
 .then (odpowiedź => odpowiedź.json())
 .then (dane => // obsługuj dane)
 .catch (err => // obsługuj błąd)

W pierwszym wierszu powyższego kodu przekazujesz adres URL API do aportować() metoda. aportować() zwraca odpowiedź HTTP, która jest konwertowana do formatu JSON przy użyciu json() metoda. W trzecim wierszu uzyskujesz dostęp do danych, które możesz następnie wykorzystać w aplikacji. Wreszcie blok catch pozwala z wdziękiem obsługiwać błędy.

Aby zaimplementować żądanie pobrania w komponencie aplikacji, użyjesz haków React. Używając użyjEfekt hook, aplikacja wyśle ​​żądanie po załadowaniu komponentu i useState hook stworzy i zaktualizuje stan komponentu. Śledzenie stanu gwarantuje, że komponent zostanie ponownie zrenderowany, gdy interfejs API pobierania zwróci odpowiedź.

Związane z: Haki: Bohater React

import useState i useEffect.
importuj { useEffect, useState } z 'react'

Utwórz stan do przechowywania informacji o kotach i funkcję do jego aktualizacji.

const [fakt, setFact] = useState('')

Następnie utwórz funkcję, aby wykonać żądanie GET do API i wywołaj je w użyjEfekt hak.

const fetchFact = () => {
aportować(" https://catfact.ninja/fact")
 .then((odpowiedź) => odpowiedź.json())
 .then((dane) => setFact (data.fact));
}
useEffect(() => {
 pobierzFakt()
}, []);

Twój plik app.js powinien teraz wyglądać tak:

importuj "./App.css";
importuj { useEffect, useState } z "react";
funkcja App() {
 const [fakt, ustawFakt] = useState("");
 const fetchFact = () => {
 aportować(" https://catfact.ninja/fact")
 .then((odpowiedź) => odpowiedź.json())
 .then((dane) => setFact (data.fact));
}
useEffect(() => {
 pobierzFakt()
}, []);
powrót (


Naciśnij przycisk, aby uzyskać losowy fakt o kotach!



Zdobądź fakt o kotach
{fakt}




);
}
eksportuj domyślną aplikację;

Teraz powinieneś być w stanie zobaczyć losowy fakt o kotach wyświetlany w Twojej przeglądarce.

Następnie napisz kod, który wyświetli losowy fakt po kliknięciu przycisku.

Zmodyfikuj przycisk, aby zawierał na kliknięcie zdarzenie i jego funkcja obsługi.

 handleClick()}>Pobierz fakt o kotach

Zdefiniuj uchwytKliknij() działać jak pokazano poniżej.

const handleClick = () => {
 pobierzFakt()
}

Teraz, gdy klikniesz przycisk, uchwytKliknij() funkcja wywoła pobierzDane() który wykona żądanie API i zaktualizuje stan o nowy losowy fakt. W związku z tym interfejs aplikacji zostanie zaktualizowany, aby wyświetlić bieżący fakt.

Korzystanie z interfejsów API REST za pomocą Axios

Zamiast aportować(), możesz korzystać z API za pomocą Aksjos. Lubić aportować(), Axios umożliwia wysyłanie żądań do punktu końcowego API. Istnieje jednak kilka różnic między nimi.

• Axios automatycznie zwraca odpowiedź w formacie JSON, gdy musisz przekonwertować ją na JSON podczas korzystania z interfejsu API Fetch.
• Axios wymaga tylko jednego wywołania zwrotnego .then() w przeciwieństwie do Fetch API.
• Axios jest kompatybilny z głównymi przeglądarkami, podczas gdy Fetch jest obsługiwany tylko w Chrome 42+, Edge 14+, Firefox 39+ i Safari 10+

Wdrażanie Axios

Zainstaluj Axios, uruchamiając następujące polecenie.

npm zainstaluj axios

Po zakończeniu instalacji zaimportuj pakiet Axios do komponentu aplikacji i zmodyfikuj pobierzFakt() funkcja, aby z niego korzystać.

importuj axios z „axios”
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (odpowiedź.data.fact)
 });
}

Otóż ​​to! Twoja aplikacja powinna wyświetlać losowy fakt kota, gdy ładuje się w przeglądarce i po kliknięciu przycisku.

Więcej zastosowań API z React

Możesz korzystać z REST API w React na różne sposoby. W tym samouczku nauczyłeś się używać Fetch i Axios do pobierania losowych faktów z interfejsu API REST. Przypadki użycia interfejsów API w rzeczywistych aplikacjach są nieograniczone.

Na przykład dzięki interfejsom API płatności, takim jak Stripe i PayPal, sklepy mogą z łatwością obsługiwać transakcje klientów online bez konieczności samodzielnego wdrażania funkcji. Dlatego nawet mniej zaawansowani technologicznie użytkownicy mogą tworzyć przydatne aplikacje, które zaspokoją ich potrzeby.

Co to jest uwierzytelnianie API i jak to działa?

Jak udowodnić, że osoba, która chce uzyskać dostęp do ważnych danych, jest tym, za kogo się podaje? Tutaj wkracza uwierzytelnianie API...

Czytaj dalej

O autorze