Ti sei mai chiesto come funziona la registrazione o l'accesso a un sito web dietro le quinte? Oppure come mai quando cerchi  "gattini carini" su YouTube ottieni una serie di risultati e sei in grado di riprodurre il contenuto del relativo video situato in una macchina remota?

In questa guida rivolta ai principianti, ti guiderò attraverso il processo dell'impostazione di una API RESTful. Declassificheremo alcuni dei termini gergali e daremo un'occhiata a come possiamo scrivere codice per creare un server in NodeJS. Addentriamoci nelle profondità di JavaScript!

Sbarazziamoci del gergo

Cos'è REST? Secondo Wikipedia (estratto):

REpresentational State Transfer (REST) è uno schema architetturale per software che definisce una serie di vincoli da usare per creare servizi Web. I servizi Web RESTful consentono ai sistemi richiedenti di accedere a rappresentazioni testuali di risorse Web e manipolarle utilizzando un insieme uniforme e predefinito di operazioni stateless (prive di stato).

Demistifichiamo il suo significato. REST è fondamentalmente un insieme di regole per la comunicazione tra un client e un server. Ci sono alcuni vincoli sulla definizione di REST:

1. Architettura client-server: l'interfaccia utente del sito web o app dovrebbe essere separata dalla richiesta/memorizzazione dei dati, in modo che ciascuna parte possa essere scalabile in modo indipendente.
2. Privo di stato (stateless): la comunicazione non dovrebbe avere alcun contesto client memorizzato sul server. Il che significa che ogni richiesta al server dovrebbe essere fatta con tutti i dati richiesti e che non si può contare sul fatto che il server conservi dati da richieste precedenti.
3. Sistema stratificato: il client non dovrebbe essere in grado di determinare se sta comunicando direttamente con il server oppure con un qualche intermediario. Questi server intermediari (potrebbero essere proxy o bilanciatori di carico) consentono stabilità e sicurezza per il server sottostante.

Va bene, ora che sai cosa sono i servizi REST, ecco alcuni dei termini usati nel titolo dell'articolo:

1. Client REST: il codice o un'app che può accedere a questi servizi REST. Ne stai usando una proprio adesso! Esatto, il browser può fungere da client REST non controllato (è il sito web che gestire le richieste del browser). Il browser, per lungo tempo, ha usato una funzione integrata chiamata XMLHttpRequest per tutte le richieste REST. Tuttavia è stata rimpiazzata da FetchAPI, un approccio moderno alle richieste, basato sulle promise. Altri esempi sono librerie di codice come axios, superagent e got o qualche app dedicata come Postman (o una versione online, hoppscotch), oppure uno strumento da riga di comando come cURL!.
2. Servizio REST: il server. Ci sono molte popolari librerie che rendono la creazione di questi server un gioco da ragazzi, come ExpressJS per NodeJS e Django per Python.
3. API REST: definisce i punti di contatto (endpoint) e i metodi consentiti per ottenere/inviare dati al server. Parleremo di ciò molto dettagliatamente in seguito. Alcune alternative sono: GraphQL, JSON-Pure e oData.

Allora dimmi, come funziona REST?

In termini molto ampi, tu chiedi al server di ottenere o di salvare certi dati e il server risponde alla richiesta.

In termini di programmazione, c'è un endpoint (un URL) sul quale il server è in attesa di ricevere una richiesta. Ci connettiamo a questo endpoint e inviamo alcuni dati su di noi (ricorda, REST è privo di stato, non vengono memorizzati i dati di una richiesta) e il server risponde in modo appropriato.

Le parole annoiano, ti darò una dimostrazione. Userò Postman per mostrarti richiesta e risposta:

I dati restituiti sono in formato JSON (JavaScript Object Notation) e possono essere consultati direttamente.

L'url https://official-joke-api.appspot.com/random_joke viene detto endpoint dell'API. Ci sarà un server in ascolto su quell'endpoint per richieste come quella che abbiamo fatto noi.

Anatomia di REST:

Ora sappiamo che i dati possono essere richiesti dal client e che il server risponderà in modo appropriato. Esaminiamo nel dettaglio come viene composta una richiesta.

1. Endpoint: di questo ho già parlato. Per ricapitolare si tratta di un URL dove è in ascolto un server REST.
2. Method (metodo): in precedenza ho scritto che puoi sia richiedere dati che modificarli, ma in che modo il server sa quale tipo di operazione è stata richiesta dal client? REST implementa diversi metodi per diversi tipi di richiesta, i più popolari sono:
   - GET: ottiene risorse dal server.
   - POST: crea risorse sul server.
   - PATCH o PUT: aggiorna risorse esistenti sul server.
   - DELETE: elimina risorse esistenti dal server.
3. Headers (intestazioni): i dettagli aggiuntivi forniti per la comunicazione tra client e server (ricorda, REST è stateless). Alcuni dei più comuni sono:
   Nella richiesta:
   - host: l'indirizzo IP del client (o da dove ha avuto origine la richiesta)
   - accept-language: il linguaggio comprensibile dal client
   - user-agent: dati di client, sistema operativo e browser
   Nella risposta:
   - status: lo stato oppure il codice HTTP della richiesta
   - content-type: il tipo di risorsa inviata dal server
   - set-cookie: i cookie impostati dal server
4. Data (dati): chiamato anche body (corpo) o message (messaggio); contiene le informazioni che vuoi inviare al server.

Basta con i dettagli – fammi vedere il codice

Iniziamo a scrivere del codice per un servizio REST in Node. Implementeremo tutte le cose che abbiamo imparato qui sopra. Inoltre useremo la sintassi ES6 e superiore per scrivere il nostro servizio.

Assicurati di avere Node.JS installato e che i comandi node e npm siano inclusi nel tuo percorso. Userò Node 12.16.2 e NPM 6.14.4.

Crea una directory rest-service-node e portati su di essa:

mkdir rest-service-node
cd rest-service-node

Inizializza il progetto node:

npm init -y

Con l'opzione -y  accetti tutte le risposte predefinite alle domande poste dallo script. Se vuoi compilare personalmente l'intero questionario esegui semplicemente npm init.

Installiamo alcuni pacchetti. Useremo il framework ExpressJS per sviluppare il server REST. Esegui il comando seguente per installarlo:

npm install --save express body-parser

A cosa serve body-parser? Express, nella modalità predefinita, non è in grado di gestire i dati inviati tramite una richiesta POST in formato JSON. body-parser consente a Express di superare questo ostacolo.

Crea un file chiamato server.js e aggiungi il codice seguente:

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());

app.listen(5000, () => {
  console.log(`Server is running on port 5000.`);
});

Le prime due righe importano Express e body-parser.

La terza riga inizializza il server Express e lo associa a una variabile chiamata app.

La riga, app.use(bodyParser.json()); inizializza il plugin body-parser.

Per ultimo impostiamo il nostro server per ricevere le richieste sulla porta 5000.

Ottenere dati da un server REST:

Per ottenere dati da un server ci serve una richiesta di tipo GET. Aggiungi il seguente codice prima di  app.listen:

const sayHi = (req, res) => {
  res.send("Hi!");
};

app.get("/", sayHi);

Abbiamo creato una funzione sayHi che riceve due parametri: req e res (la spiegazione in seguito) e invia un 'Hi!' come risposta.

app.get() riceve due parametri, il percorso della rotta e la funzione da chiamare quando il percorso viene richiesto dal client. Pertanto l'ultima riga significa: ehi server, mettiti in ascolto per richieste sul percorso  '/' (pensa homepage) e chiama la funzione sayHi se viene effettuata una richiesta.

app.get ci fornisce anche un oggetto request che contiene tutti i dati inviati dal client e un oggetto response che contiene tutti i metodi con i quali possiamo rispondere al client. Anche se sono accessibili come parametri di funzione, è consigliato per convenzione generale che vengano chiamati res per response e req per request.

Bando alle ciance. Lanciamo il server! Esegui il seguente comando:

node server.js

Se tutto va bene dovresti vedere un messaggio nella console che dice: Server is running on port 5000 (il server è in esecuzione sulla porta 5000).

Nota: Puoi cambiare la porta di ascolto con un altro numero, tuttavia evitando di usare quelle standard utilizzate da altri servizi.

Apri il tuo browser e nella barra degli indirizzi inserisci http://localhost:5000/. Dovresti vedere qualcosa tipo questo:

Fatto! La tua prima richiesta GET ha avuto successo!

Inviare dati al server REST

Come accennato in precedenza, implementiamo la gestione di una richiesta POST nel nostro server che restituisce la somma di due numeri interi ricevuti nella richiesta. Invieremo due numeri e il server in risposta restituirà la loro somma. Aggiungi questo nuovo metodo dopo app.get:

app.post("/add", (req, res) => {
  const { a, b } = req.body;
  res.send(`The sum is: ${a + b}`);
});

Noi invieremo i dati in formato JSON, in questo modo:

{
    "a":5,
    "b":10
}

Esaminiamo il codice:

Nella prima riga chiamiamo il metodo .post() di ExpressJS, che consente al server di gestire richieste POST. Questa funzione riceve gli stessi parametri del metodo .get(). Il percorso che passiamo è /add, quindi si potrà contattare l'endpoint come http://il-tuo-indirizzo-ip:porta/add oppure, nel nostro caso, localhost:5000/add. Invece di scrivere una funzione altrove gestiamo tutto all'interno.

Nella seconda riga abbiamo usato un po' di sintassi ES6, nella fattispecie la destrutturazione di un oggetto. Qualsiasi dato inviamo tramite richiesta viene conservato ed è disponibile nella chiave body dell'oggetto req. Quindi in sostanza avremmo potuto sostituire la seconda riga con qualcosa tipo:

const num1 = req.body.a;
const num2 = req.body.b;

Nella terza riga usiamo il metodo send() dell'oggetto res per inviare il risultato dell'addizione. Ancora una volta usiamo i template literals da ES6. Ora facciamo un test (usando Postman):

Abbiamo inviato i dati  5 e 10 associati alle chiavi a e b inserendoli come body. Postman allega questi dati alla richiesta e la invia. Quando il server riceve la richiesta può elaborare i dati da req.body, come abbiamo fatto nel codice qui sopra. Il risultato è mostrato più sotto.

Ecco il codice fino a ora:

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());

const sayHi = (req, res) => {
  res.send("Hi!");
};

app.get("/", sayHi);

app.post("/add", (req, res) => {
  const { a, b } = req.body;
  res.send(`The sum is: ${a + b}`);
});

app.listen(5000, () => {
  console.log(`Server is running on port 5000.`);
});

Client REST:

Va bene, abbiamo creato il server, ma come vi accediamo dal nostro sito web o app web? Qui le librerie client REST torneranno utili.

Andremo a costruire una pagina web che conterrà un form, dove potrai digitare i due numeri da sommare, poi visualizzeremo il risultato. Iniziamo.

Per prima cosa modifichiamo un poco server.js:

const path = require("path");
const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "index.html"));
});

app.post("/add", (req, res) => {
  const { a, b } = req.body;
  res.send({
    result: parseInt(a) + parseInt(b)
  });
});

app.listen(5000, () => {
  console.log(`Server is running on port 5000.`);
});

Abbiamo importato un nuovo pacchetto,  path, fornito da Node, per manipolare i percorsi indipendentemente dalla piattaforma. Poi abbiamo cambiato la richiesta GET su / e usato un altro metodo disponibile in res, vale a dire sendFile, che ci consente di inviare qualunque tipo di file come risposta. Quindi quando qualcuno si porterà sul percorso /, otterrà la nostra pagina index.html.

Infine abbiamo cambiato la nostra funzione app.post affinché restituisca la somma in formato JSON e converta in interi sia a che b.

Creiamo una pagina html, che chiameremo index.html, con uno stile di base:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>REST Client</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    form {
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
    }
    label,
    input[type="submit"] {
      margin-top: 20px;
    }
  </style>
  <body>
    <div class="container">
      <h1>Simple POST Form</h1>
      </h1>
      <form>
        <label>Number 1:</label>
        <input id="num1" type="number" />
        <label>Number 2:</label>
        <input id="num2" type="number" />
        <input type="submit" value="Add"/>
      </form>
      <div class="result">Click Add!</div>
    </div>
  </body>
</html>

Aggiungiamo un tag script appena prima del tag di chiusura body per evitare di dover gestire un file .js separato. Inizieremo con l'inserire un event listener per l'evento submit che chiamerà la funzione sendData:

<script>
	document.addEventListener("submit", sendData);
</script>

All'interno della funzione, per prima cosa, dobbiamo impedire l'aggiornamento della pagina quando viene fatto click sul pulsante 'Add'. Questo si può fare chiamando il metodo preventDefault() dell'evento. Poi catturiamo i valori delle caselle di testo, vale a dire i numeri da sommare:

function sendData(e) {
    e.preventDefault();
    const a = document.querySelector("#num1").value;
    const b = document.querySelector("#num2").value;
}

Ora facciamo una chiamata al server passando i valori di a e b. Useremo l'API Fetch, integrata su tutte le versioni più recenti dei browser.

Fetch riceve due parametri, l'URL dell'endpoint e un oggetto JSON con i dettagli della richiesta, e ritorna una promise. Spiegare cos'è una promise va oltre lo scopo di questo articolo pertanto lascio a te scoprirlo.

Proseguiamo aggiungendo quanto segue all'interno della funzione sendData():

fetch("/add", {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            a: parseInt(a),
            b: parseInt(b)
        })
    })
    .then(res => res.json())
    .then(data => {
        const {
            result
        } = data;
        document.querySelector(
            ".result"
        ).innerText = `The sum is: ${result}`;
    })
    .catch(err => console.log(err));

Per prima cosa chiamiamo la funzione fetch passando l'URL che corrisponde all'endpoint desiderato come primo parametro. Come secondo parametro passiamo un oggetto che contiene:

• nella chiave method il nome del tipo di metodo, POST in questo caso che, dovrà essere usato per effettuare la richiesta
• nella chiave headers un oggetto con le informazioni relative al tipo di dati che stiamo inviando (chiave Content-Type) e tipo di dati che accettiamo come risposta (chiave Accept)
• nella chiave body passiamo il corpo del messaggio, vale a dire i numeri che devono essere sommati, forzando la conversione a valori interi, visto che non abbiamo implementato sul server una verifica sul tipo dei dati, sotto forma di stringa JSON, come specificato nell'header Content-Type, tramite la funzione JSON.stringify()

Infine, se la promise (ritornata da fetch) si risolve, otteniamo la risposta e la convertiamo in JSON. Successivamente recuperiamo il risultato dalla chiave data ritornato dalla risposta, che andremo a visualizzare sullo schermo.

Se la promise viene rigettata, visualizzeremo un messaggio di errore nella console.

Ecco il codice finale per index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>REST Client</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    form {
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
    }
    label,
    input[type="submit"] {
      margin-top: 20px;
    }
  </style>
  <body>
    <div class="container">
      <h1>Simple POST Form</h1>
      </h1>
      <form>
        <label>Number 1:</label>
        <input id="num1" type="number" />
        <label>Number 2:</label>
        <input id="num2" type="number" />
        <input type="submit" value="Add"/>
      </form>
      <div class="result">Click Add!</div>
    </div>
    <script>
      document.addEventListener("submit", sendData);
      function sendData(e) {
        e.preventDefault();
        const a = document.querySelector("#num1").value;
        const b = document.querySelector("#num2").value;

        fetch("/add", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            a: parseInt(a),
            b: parseInt(b)
          })
        })
          .then(res => res.json())
          .then(data => {
            const { result } = data;
            document.querySelector(
              ".result"
            ).innerText = `The sum is: ${result}`;
          })
          .catch(err => console.log(err));
      }
    </script>
  </body>
</html>

Ho inserito una piccola app su glitch per te da provare.

Conclusione

In questo post abbiamo imparato cos'è l'architettura REST e l'anatomia delle richieste REST. Abbiamo creato un semplice server REST che risponde a richieste GET e POST e costruito una semplice pagina web che usa un client REST per visualizzare la somma di due numeri.

Puoi ulteriormente ampliare il codice del server codificando anche le risposte per gli altri tipi di richiesta e addirittura implementare una completa app back-end per operazioni CRUD.

Spero che tu abbia imparato qualcosa da questo post. Se hai una qualsiasi domanda, sentiti libero di contattarmi su twitter. Buona programmazione!

React è una popolare libreria frontend che gli sviluppatori usano per creare applicazioni. Se vuoi creare app pronte per la produzione, a un certo punto dovrai integrare le API nella tua applicazione React.

Ogni sviluppatore che voglia costruire applicazioni web moderne e robuste con React deve sapere come utilizzare le API per ottenere dati da inserire nelle proprie applicazioni React.

In questa guida per principianti imparerai come utilizzare API RESTful in React, incluso il recupero, l'eliminazione e l'aggiunta di dati. Esamineremo anche i due modi principali per utilizzare le API RESTful e come usarle con gli hook di React.

Cos'è una API REST?

Se hai mai dedicato del tempo a programmare o fare ricerche sulla programmazione, probabilmente ti sei imbattuto nel termine "API".

API sta per Application Programming Interface (Interfaccia di Programmazione per un'Applicazione). È un mezzo che consente a diverse applicazioni di comunicare tra loro in modo programmatico e restituire una risposta in tempo reale.

Roy Fielding ha definito REST nel 2000 come uno stile architetturale e una metodologia comunemente utilizzati nello sviluppo di servizi internet, come i sistemi ipermediali distribuiti. È un acronimo che sta per "REpresentational State Transfer".

Quando viene effettuata una richiesta tramite API REST, viene inviata una rappresentazione dello stato corrente di una risorsa al richiedente o  endpoint. Questa rappresentazione dello stato può essere in formato JSON (JavaScript Object Notation), XML, o HTML.

JSON è il formato di file maggiormente usato in quanto è indipendente dal linguaggio e può essere letto sia dall'uomo che dalle macchine.

Per esempio:

[
   {
      "userId": 1,
      "id": 1,
      "title": "sunt excepturi",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur "
   },
   {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae\nsequi sint nihil"
   }
]

Come Utilizzare le API REST in React

Ci sono svariati modi di utilizzare una API REST in una applicazione React, ma in questa guida, daremo uno sguardo a due degli approcci più popolari:  Axios (un client HTTP basato su promise) e l'API Fetch (una API web integrata nel browser).

Nota: Dovresti avere familiarità con JavaScript, React, e gli hook React, poiché sono fondamentali per una piena comprensione di questa guida.

Prima di approfondire come utilizzare le API, è importante capire che l'utilizzo di API in React è molto diverso da come avviene in JavaScript. Questo perché le richieste vengono eseguite in un Componente React.

Nel nostro caso utilizzeremo componenti funzionali, il che significa che dovremo usare due dei principali hook di React:

• hook useEffect: in React, eseguiamo le richieste API all'interno dell'hook useEffect() . Con questo hook il codice viene eseguito immediatamente quando il componente che lo contiene viene caricato oppure dopo che viene raggiunto uno specifico stato. Questa è la sintassi generale che useremo:

useEffect(() => {
    // qui il recupero dei dati
}, []);

• hook useState: quando richiediamo dati, dobbiamo preparare uno stato nel quale i dati verranno conservati una volta restituiti. Possiamo salvare lo stato in uno strumento per la gestione dello stato come Redux oppure in un oggetto nel contesto. Per mantenere le cose semplici, conserveremo i dati restituiti in uno stato locale React.

const [posts, setPosts] = useState([]);

Entriamo ora nel vivo di questa guida, dove impareremo come ottenere, aggiungere ed eliminare i dati utilizzando l'API dei post JSONPlaceholder. Questa conoscenza è applicabile a qualsiasi tipo di API, poiché questa guida è destinata ai principianti.

Come Utilizzare le API Usando l'API Fetch

L'API Fetch è un metodo JavaScript integrato per recuperare risorse da un server o da un endpoint API. Essendo integrato, non necessita di installazione di alcuna dipendenza o pacchetto.

Il metodo fetch() richiede un argomento obbligatorio, che è il percorso o URL della risorsa che si vuole ottenere. Restituisce poi una Promise in modo che tu possa gestire successo o fallimento usando i metodi then() e catch().

Una richiesta di recupero di base è molto semplice da scrivere e ha l'aspetto del codice seguente. Stiamo semplicemente recuperando i dati da un URL che restituisce i dati come JSON, che poi stampiamo nella console:

fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
   .then(response => response.json())
   .then(data => console.log(data));

In genere la risposta predefinita è una normale risposta HTTP invece che l'effettivo JSON, ma possiamo ottenere il nostro risultato come oggetto JSON usando il metodo json() della risposta.

Come Eseguire una Richiesta GET in React con l'API Fetch

Puoi usare il metodo HTTP GET per richiedere dati da un endpoint.

Come detto in precedenza, l'API Fetch riceve un argomento obbligatorio. Accetta  anche un argomento facoltativo, specialmente se si usa il metodo predefinito GET, rappresentato da un oggetto, tuttavia per gli altri metodi come POST e DELETE questo argomento è richiesto in quanto in esso va inserito il tipo di metodo da utilizzare:

fetch(url, {
    method: "GET" // predefinito, possiamo ignorarlo
})

Fino a qui abbiamo imparato come funzionano le cose, ora mettiamo tutto insieme ed eseguiamo una richiesta get per ottenere dati dalla nostra API.

Nuovamente, useremo l'API libera online JSONPlaceholder per recuperare un elenco di post per la nostra applicazione:

import React, { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
         .then((response) => response.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

return (
   // ... qui i dati vengono utilizzati
);
};

Nella parte di codice precedente abbiamo creato codice per conservare i dati che otteniamo dall'API così da poterli utilizzare più tardi nella nostra applicazione. Abbiamo anche impostato come valore predefinito un array vuoto.

const [posts, setPosts] = useState([]);

Il grosso dell'operazione si svolge nell'hook useEffect, in modo che i dati/post siano recuperati non appena l'applicazione viene caricata. La richiesta di recupero dati genera una promise, che possiamo accettare o rifiutare:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10').then(
      (response) => console.log(response)
   );
}, []);

Questa risposta contiene una grande quantità di dati, come il codice di stato, testo e altre informazioni che ci serviranno per gestire gli errori successivamente.

Fino ad ora, abbiamo gestito la risoluzione della promise con .then(), ma essa restituisce un oggetto Response, che non è quello che vogliamo. Dobbiamo estrarre dall'oggetto Response i dati nel formato JSON usando il metodo json(). Anche questo metodo restituisce una promise che possiamo utilizzare per ottenere i dati effettivi usando il secondo .then().

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      });
}, []);

Se diamo un'occhiata alla console, vedremo che abbiamo recuperato 10 post dalla nostra API, che abbiamo poi assegnato allo stato specificato in precedenza.

Non abbiamo ancora finito, in quanto abbiamo gestito solo la parte di risoluzione della promise, non la parte di rifiuto, che gestiremo tramite il metodo .catch() :

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

Fino a ora abbiamo visto come eseguire una richiesta GET, che può essere facilmente usata nella nostra applicazione eseguendo un loop sul nostro array:

const App = () => {
// ...

   return (
   <div className="posts-container">
      {posts.map((post) => {
         return (
            <div className="post-card" key={post.id}>
               <h2 className="post-title">{post.title}</h2>
               <p className="post-body">{post.body}</p>
               <div className="button">
               <div className="delete-btn">Delete</div>
               </div>
            </div>
         );
      })}
   </div>
   );
};

export default App;

Come Eseguire una Richiesta POST in React con l'API Fetch

Possiamo usare il metodo HTTP POST per inviare dati verso un endpoint. Funziona in modo simile alla richiesta GET, la differenza principale è che dobbiamo aggiungere il tipo di metodo e due parametri aggiuntivi all'oggetto che contiene i dati opzionali:

const addPosts = async (title, body) => {
await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
   title: title,
   body: body,
   userId: Math.random().toString(36).slice(2),
}),
headers: {
   'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((data) => {
   setPosts((posts) => [data, ...posts]);
   setTitle('');
   setBody('');
})
.catch((err) => {
   console.log(err.message);
});
};

I principali parametri che potrebbero apparire strani sono body e headers.

body contiene i dati che vogliamo passare all'API, che prima dobbiamo convertire in stringa JSON in quanto stiamo inviando dati a un server web. headers specifica il tipo di dati, che sarà sempre lo stesso quando si utilizzano API REST. Impostiamo anche lo stato per conservare i nuovi dati e distribuire i dati rimasti nell'array.

Osservando il metodo addPost() che abbiamo creato, ci attendiamo che questi dati provengano da un form o altro. Nel nostro caso, ho creato un form, ottenuto i dati del form tramite stati, quindi li ho aggiunti al metodo una volta che il form viene inviato:

import React, { useState, useEffect } from 'react';
const App = () => {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
// ...
const addPosts = async (title, body) => {
   await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
      .then((response) => response.json())
      .then((data) => {
         setPosts((posts) => [data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

const handleSubmit = (e) => {
   e.preventDefault();
   addPosts(title, body);
};    

return (
   <div className="app">
      <div className="add-post-container">
         <form onSubmit={handleSubmit}>
            <input type="text" className="form-control" value={title}
               onChange={(e) => setTitle(e.target.value)}
            />
            <textarea name="" className="form-control" id="" cols="10" rows="8" 
               value={body} onChange={(e) => setBody(e.target.value)} 
            ></textarea>
            <button type="submit">Add Post</button>
         </form>
      </div>
      {/* ... */}
   </div>
);
};

export default App;

Come Eseguire una Richiesta DELETE in React con l'API Fetch

Puoi usare il metodo HTTP DELETE per eliminare dati da un endpoint. Funziona in modo simile alla richiesta GET, la differenza principale è l'aggiunta del tipo di metodo nell'oggetto opzionale:

const deletePost = async (id) => {
await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
   method: 'DELETE',
}).then((response) => {
   if (response.status === 200) {
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   } else {
      return;
   }
});
};

La richiesta viene attivata quando viene premuto il pulsante e otteniamo l'id dello specifico post relativo al bottone premuto. Poi eliminiamo quei dati da tutti i dati restituiti.

Ciò farà si che il post sia rimosso dall'API ma non immediatamente dall'interfaccia utente, ecco perché abbiamo aggiunto un filtro per eliminare anche i dati dall'applicazione. Per ciascun elemento del loop, il pulsante di cancellazione appare in questo modo:

const App = () => {
// ...

   return (
   <div className="posts-container">
      {posts.map((post) => {
         return (
            <div className="post-card" key={post.id}>
               {/* ... */}
               <div className="button">
                  <div className="delete-btn" onClick={() => deletePost(post.id)}>
                     Delete
                  </div>
               </div>    
            </div>
         );
      })}
   </div>
   );
};

export default App;

Come Usare Async/Await nell'API Fetch

Fino a ora abbiamo visto come eseguire richieste con Fetch normalmente, utilizzando la sintassi di promise, che a volte può confondere. Poi c'è il concatenamento. Possiamo evitare il concatenamento con .then() usando async/await per scrivere codice più leggibile.

Per usare async/await, prima si chiama async nella funzione. Poi quando facciamo una richiesta e ci attendiamo una risposta, aggiungiamo la parola chiave await davanti alla chiamata alla funzione dalla quale attendere fino a quando la promise è pronta con il risultato.

Quando usiamo async/await, tutte le nostre richieste Fetch saranno scritte in questo modo:

import React, { useState, useEffect } from 'react';

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // GET with fetch API
   useEffect(() => {
      const fetchPost = async () => {
         const response = await fetch(
            'https://jsonplaceholder.typicode.com/posts?_limit=10'
         );
         const data = await response.json();
         console.log(data);
         setPosts(data);
      };
      fetchPost();
   }, []);

   // Delete with fetchAPI
   const deletePost = async (id) => {
      let response = await fetch(
         `https://jsonplaceholder.typicode.com/posts/${id}`,
         {
            method: 'DELETE',
         }
      );
      if (response.status === 200) {
         setPosts(
            posts.filter((post) => {
               return post.id !== id;
            })
         );
      } else {
         return;
      }
   };

   // Post with fetchAPI
   const addPosts = async (title, body) => {
      let response = await fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      });
      let data = await response.json();
      setPosts((posts) => [data, ...posts]);
      setTitle('');
      setBody('');
   };

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   return (
      // ...
   );
};

export default App;

Come Gestire gli Errori con l'API Fetch

In questa sezione, daremo un'occhiata a come gestire gli errori sia nel modo tradizionale che con async/await.

Possiamo usare i dati in risposta per gestire gli errori nell'API Fetch, oppure possiamo usare l'istruzione try/catch quando utilizziamo async/await.

Diamo un'occhiata a come possiamo farlo in genere con l'API Fetch:

const fetchPost = () => {
fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
   .then((response) => {
      if (!response.ok) {
         throw Error(response.statusText);
      }
      return response.json();
   })
   .then((data) => {
      console.log(data);
      setPosts(data);
   })
   .catch((err) => {
      console.log(err.message);
   });
};

Puoi trovare ulteriori informazioni sugli errori dell'API Fetch qui.

Per quanto riguarda async/await possiamo usare l'istruzione try / catch in questo modo:

const fetchPost = async () => {
   try {
      const response = await fetch(
         'https://jsonplaceholder.typicode.com/posts?_limit=10'
      );
      const data = await response.json();
      setPosts(data);
   } catch (error) {
      console.log(error);
   }
};

Come Utilizzare le API con Axios

Axios  è una libreria HTTP client basata sulle promise che facilita l'invio di richieste asincrone HTTP verso endpoint REST. Nel nostro caso l'endpoint è l'API dei Post JSONPlaceholder, alla quale invieremo richieste GET, POST, e DELETE.

Come Installare e Configurare una Istanza di Axios

Axios, al contrario dell'API Fetch, non è integrata, pertanto la dobbiamo includere nel nostro progetto per poterla usare.

Puoi aggiungere Axios al tuo progetto eseguendo il seguente comando:

npm install axios

Una volta installata con successo Axios, possiamo procedere alla creazione di una istanza, il che è opzionale ma consigliato in quanto ci risparmia inutili ripetizioni.

Per creare una istanza usiamo il metodo .create(), che possiamo utilizzare per specificare informazioni tipo l'URL e possibili header:

import axios from "axios";

const client = axios.create({
   baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

Come Eseguire una Richiesta GET in React con Axios

Useremo l'istanza dichiarata in precedenza per eseguire una richiesta GET. Tutto quello che dovremo fare sarà impostare i parametri, se necessari, e ottenere una risposta JSON come formato predefinito.

Diversamente dal metodo dell'API Fetch, non sono necessarie opzioni per dichiarare il metodo. Semplicemente utilizziamo il tipo di richiesta come metodo dell'istanza ed eseguiamo la richiesta.

useEffect(() => {
   client.get('?_limit=10').then((response) => {
      setPosts(response.data);
   });
}, []);

Come Eseguire una Richiesta POST in React con Axios

Come detto prima, puoi usare il metodo  POST per inviare dati a un endpoint. Funziona in modo simile alla richiesta GET, la principale differenza è che occorre chiamare il relativo metodo passando come parametro un oggetto contenente i dati che vogliamo inviare:

const addPosts = (title, body) => {
   client
      .post('', {
         title: title,
         body: body,
      })
      .then((response) => {
         setPosts((posts) => [response.data, ...posts]);
      });
};

Come Eseguire una Richiesta DELETE in React con Axios

Possiamo eseguire richiese di cancellazione usando il metodo delete, che riceve un id ed elimina il post relativo dall'API. Useremo anche il metodo filter per eliminarlo anche dall'interfaccia utente, così come abbiamo fatto con il corrispondente metodo dell'API Fetch:

const deletePost = (id) => {
   client.delete(`${id}`);
   setPosts(
      posts.filter((post) => {
         return post.id !== id;
      })
   );
};

Come Usare Async/Await in Axios

Fino a ora abbiamo visto come effettuare richieste Axios usando la sintassi di promise. Ora vediamo come possiamo usare async/await per scrivere meno codice ed evitare il concatenamento con .then().

Quando usiamo async/await, tutte le nostre richieste Axios saranno così:

import React, { useState, useEffect } from 'react';

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // GET with Axios
   useEffect(() => {
      const fetchPost = async () => {
         let response = await client.get('?_limit=10');
         setPosts(response.data);
      };
      fetchPost();
   }, []);

   // Delete with Axios
   const deletePost = async (id) => {
      await client.delete(`${id}`);
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   };

   // Post with Axios
   const addPosts = async (title, body) => {
      let response = await client.post('', {
         title: title,
         body: body,
      });
      setPosts((posts) => [response.data, ...posts]);
   };

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   return (
      // ...
   );
};

export default App;

Come Gestire Errori con Axios

Per le richieste Axios basate su promise possiamo usare i metodi .then() e .catch(), mentre per async/await possiamo usare il blocco try...catch. È molto simile a come abbiamo implementato l'API Fetch, e il blocco try...catch è scritto in questo modo:

const fetchPost = async () => {
   try {
      let response = await client.get('?_limit=10');
      setPosts(response.data);
   } catch (error) {
      console.log(error);
   }
};

Puoi trovare ulteriori informazioni sulla gestione degli errori con Axios qui

API Fetch Contro Axios

Potresti aver notato alcune differenze, ora le metteremo in una pratica tabella in modo da confrontare correttamente  Fetch e Axios.

Queste distinzioni ti aiuteranno a decidere quale libreria utilizzare per un progetto specifico. Tra queste distinzioni ci sono:

Conclusione

In questa guida, abbiamo imparato come utilizzare le API REST in React usando l'API Fetch oppure Axios.

Ti aiuterà a iniziare a usare le API in React e da lì, sarai in grado di utilizzare i dati in modi più complessi e manipolare le tue API come preferisci.