Come consumare le API in React usando Fetch e Axios

Un'API (Application Programming Interface) è un insieme di protocolli che consente a un'applicazione di inviare richieste a un server e ricevere una risposta.

Attraverso le API, sei in grado di integrare parti di software nella tua applicazione senza il lavoro di base. Questo processo di utilizzo di un'API nell'applicazione viene generalmente definito consumo di un'API. Ad esempio, se desideri visualizzare una determinata posizione sul tuo sito Web, utilizzerai l'API di Google Maps invece di implementare la funzionalità della mappa da zero. Le API, quindi, riducono il tuo carico di lavoro e ti fanno risparmiare tempo.

Per imparare come utilizzare le API REST in React usando Fetch e Axios, creerai una semplice applicazione React che ottiene un fatto casuale sui gatti da un'API quando fai clic su un pulsante.

Tipi di API

Le API possono essere classificate in base alla disponibilità o al caso d'uso. In termini di disponibilità, le API possono essere pubbliche, private, partner o composite. Se classificati in base al loro scopo, possono esserlo database, sistemi operativi remoti o API Web. In questo articolo utilizzeremo un tipo di API Web chiamata REST (Representational State) API.

Le API REST consentono di ottenere dati da un'origine tramite un URL. In React, sono disponibili diversi metodi che puoi utilizzare per utilizzare le API REST. Questo articolo discute i due metodi più popolari, ovvero l'API JavaScript Fetch e il client HTTP basato su promesse Axios.

Imparentato: Che cos'è l'API REST e come puoi acquisire dati per la tua app o sito web

Prerequisiti

Per seguire questa guida, dovresti avere:

• Conoscenza di base di JavaScript.
• Conoscenza di base degli hook React e React.
• NPM installato localmente sulla tua macchina.
• Installato un editor di testo o un IDE a tua scelta.

Crea un'applicazione di reazione

Innanzitutto, dovrai creare un'applicazione React. Copia il seguente comando nel tuo terminale per configurare un ambiente di sviluppo React.

npx create-react-app catfact

Una volta completata l'esecuzione del comando, apri il file fatto cartella nel tuo editor di testo. Scriverai il tuo codice nel file App.js nel file src cartella quindi vai avanti e rimuovi il codice non necessario.

importa "./App.css";
funzione App() {
 Restituzione (


Premi il pulsante per un fatto a caso sui gatti!



Ottieni il fatto del gatto



 );
}
esporta l'app predefinita;

Quindi, crea una semplice interfaccia utente che utilizzerà per visualizzare il fatto del gatto casuale.

In app.js

importa './App.css';
funzione App() {
 Restituzione (


Premi il pulsante per un fatto a caso sui gatti!



Ottieni il fatto del gatto



 );
}
esporta l'app predefinita;

Per definire lo stile della tua app, aggiungi il codice seguente a app.css file.

@import URL(' https://fonts.googleapis.com/css2?family=Playfair+Display: italiano, wght@700;500&display=scambia');
.App {
 famiglia di caratteri: 'Playfair Display', serif;
 margine: 20px 15vw;
}
h2 {
 famiglia di caratteri: 'Playfair Display', serif;
 peso del carattere: 700;
 dimensione del carattere: 3em;
}
pulsante {
 imbottitura: 1em 1,2em;
 confine: nessuno;
 dimensione del carattere: 1em;
 colore di sfondo: #131212;
 colore: #ffffff;
 raggio di confine: 0,5 em;
 cursore: puntatore;
}
pulsante: passa il mouse{
 colore di sfondo:#3b3b3b;
}

La tua applicazione ora dovrebbe assomigliare a questa.

Nei passaggi successivi, recupererai i dati dall'API e li visualizzerai nell'applicazione.

Imparentato: Come creare la tua prima app React con JavaScript

Consumo di API REST tramite Fetch

Recupera API è un'interfaccia che consente di ottenere risorse da un'API tramite richieste HTTP. Il andare a prendere() riceve l'URL del percorso della risorsa come argomento obbligatorio e restituisce una promessa che può risolversi in una risposta.

La sintassi di base del andare a prendere() il metodo è il seguente:

fetch('URL alla risorsa')
 .then (risposta => // gestisce la risposta)
 .catch (err => // gestisce l'errore)

Implementazione dell'API di recupero

In React, l'API Fetch viene utilizzata nello stesso modo in cui viene utilizzata in JavaScript semplice.

andare a prendere(" https://catfact.ninja/fact")
 .then (risposta => response.json())
 .then (dati => // gestisci i dati)
 .catch (err => // gestisce l'errore)

Nella prima riga del codice sopra, stai passando l'URL dell'API a andare a prendere() metodo. andare a prendere() restituisce una risposta HTTP che viene convertita in JSON utilizzando l'estensione json() metodo. Nella terza riga, hai accesso ai dati che puoi quindi utilizzare nell'applicazione. Infine, il blocco catch ti consente di gestire gli errori con garbo.

Per implementare la richiesta di recupero nel componente dell'app, utilizzerai gli hook React. Utilizzando il useEffect hook, l'applicazione effettuerà la richiesta una volta caricato il componente e il file useState hook creerà e aggiornerà lo stato del componente. Tenere traccia dello stato garantisce che il componente esegua nuovamente il rendering quando l'API di recupero restituisce la risposta.

Imparentato: Hooks: L'eroe di React

import useState e useEffect.
importa { useEffect, useState } da 'reagire'

Crea uno stato per contenere il fatto del gatto e la funzione per aggiornarlo.

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

Quindi, crea una funzione per effettuare la richiesta GET all'API e chiamala nel file useEffect gancio.

const fetchFact = () => {
andare a prendere(" https://catfact.ninja/fact")
 .then((risposta) => response.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);

Il tuo file app.js ora dovrebbe assomigliare a questo:

importa "./App.css";
import {useEffect, useState } da "react";
funzione App() {
 const [fatto, setFact] = useState("");
 const fetchFact = () => {
 andare a prendere(" https://catfact.ninja/fact")
 .then((risposta) => response.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);
Restituzione (


Premi il pulsante per un fatto a caso sui gatti!



Ottieni il fatto del gatto
{fatto}




);
}
esporta l'app predefinita;

Ora dovresti essere in grado di vedere un fatto casuale sui gatti visualizzato nel tuo browser.

Quindi, scrivi il codice per visualizzare un fatto casuale quando si fa clic sul pulsante.

Modificare il pulsante per includere un al clic evento e la sua funzione di gestione.

 handleClick()}>Ottieni il fatto Cat

Definisci il handleClick() funzione come mostrato di seguito.

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

Ora, quando fai clic sul pulsante, il file handleClick() la funzione chiamerà recuperaDati() che eseguirà la richiesta API e aggiornerà lo stato con un nuovo fatto casuale. Di conseguenza, l'interfaccia utente dell'applicazione si aggiornerà per visualizzare il fatto corrente.

Consumo di API REST utilizzando Axios

Invece di andare a prendere(), puoi utilizzare le API con Asso. Piace andare a prendere(), Axios consente di effettuare richieste a un endpoint API. Tuttavia, ci sono diverse differenze tra i due.

• Axios restituisce automaticamente la risposta in JSON mentre devi convertirla in JSON quando usi l'API Fetch.
• Axios richiede solo un callback .then() a differenza dell'API Fetch.
• Axios è compatibile con i principali browser mentre Fetch è supportato solo in Chrome 42+, Edge 14+, Firefox 39+ e Safari 10+

Implementazione di Axios

Installa Axios eseguendo il comando seguente.

npm installa assios

Al termine dell'installazione, importa il pacchetto Axios nel componente dell'app e modifica il file fetchFact() funzione per usarlo.

importare axios da 'axios'
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

Questo è tutto! La tua applicazione dovrebbe visualizzare un fatto gatto casuale quando viene caricata nel browser e quando fai clic sul pulsante.

Più usi per le API con React

Puoi utilizzare le API REST in React usando vari metodi. In questo tutorial, hai imparato come usare Fetch e Axios per recuperare un fatto casuale da un'API REST. I casi d'uso delle API nelle applicazioni del mondo reale sono infiniti.

Ad esempio, tramite API di pagamento come Stripe e PayPal, i negozi possono gestire facilmente le transazioni dei clienti online senza dover implementare la funzionalità da soli. Pertanto, anche gli utenti meno esperti di tecnologia possono creare applicazioni utili che soddisfano le loro esigenze.

Che cos'è l'autenticazione API e come funziona?

Come si dimostra che la persona che desidera accedere a dati importanti è chi dice di essere? È qui che entra in gioco l'autenticazione API...

Leggi Avanti

Circa l'autore