Molte web app si trovano ad affrontare la necessità di interfacciarsi con un'API REST a un certo punto del loro sviluppo. Per le web app basate su React, possiamo usare Axios, un client HTTP leggero basato sul servizio $http all'interno di Angular.js v1.x. Le funzionalità sono simili alla nativa Fetch API.
di JavaScript. Axios è basato su promise, offrendoci la possibilità di incorporare async e await per un codice sincrono più leggibile. Supporta anche l'intercettazione e l'annullamento delle richieste. Inoltre, è presente una protezione integrata lato client contro il cross-site request forgery.
In questa guida, mostreremo come utilizzare Axios per accedere alla popolare JSON Placeholder API in un'applicazione React dimostrativa. Puoi saperne di più su il formato JSON in JavaScript da questo tutorial.
Prerequisiti
Per completare i passaggi illustrati in questa guida, avrai bisogno dei seguenti componenti:
- Un server Ubuntu configurato correttamente. Ecco i passaggi per configurare il tuo server Ubuntu su CloudSigma.
- L'ultima versione di Node.js installata. Scopri come installare Node.js su Ubuntu.
- Un nuovo progetto React che utilizza Create React App. Sarà utile prima seguire ed eseguire questa guida sulla configurazione di un progetto React utilizzando Create React App.
- Comprensione di base di HTML, CSS, e JavaScript.
Passo 1: Installare Axios nel progetto React
Axios è direttamente disponibile come modulo npm. Dai un'occhiata a Axios su npm. Tutto ciò di cui abbiamo bisogno è creare un progetto React e installare il pacchetto Axios.
Il seguente comando npx eseguirà create-react-app per creare un nuovo progetto React. Il nome del progetto verrà utilizzato per creare una directory dedicata per il progetto. Qui abbiamo chiamato il progetto react-axios-demo. Esegui il comando:
|
1 |
npx create-react-app react-axios-demo |
Cambia la directory corrente nella directory del progetto appena creato:
|
1 |
cd react-axios-demo/ |
Successivamente, invoca il comando npm install per installare Axios. Se non viene specificata alcuna versione, npm scaricherà e installerà automaticamente l'ultima versione di Axios:
|
1 |
npm install axios |
Il nostro progetto è ora pronto per usare Axios! È tempo di mettere in azione le sue funzionalità.
Passo 2: Costruire una richiesta GET
In questo passaggio, mostreremo la creazione di un nuovo componente che utilizza Axios per inviare una richiesta GET.
Innanzitutto, crea un nuovo componente PersonList che mostrerà un elenco di nomi. Crea una directory dedicata per memorizzare il componente:
|
1 |
mkdir -pv src/components |
Successivamente, crea il file PersonList.js :
|
1 |
touch PersonList.js |
Apri il file in un editor di testo. Stiamo usando Visual Studio Code per comodità e leggibilità. Inserisci il seguente codice JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React from 'react'; import axios from 'axios'; export default class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <ul> { this.state.persons .map(person => <li key={person.id}>{person.name}</li> ) } </ul> ) } } |
Qui:
-
Abbiamo importato React e Axios in modo da poterli utilizzare entrambi nel componente.
-
Ci colleghiamo all'hook del ciclo di vita componentDidMount e inviamo una richiesta GET.
Puoi usare axios.get(<url>) da un endpoint API per ottenere una promise (restituisce un oggetto di risposta). All'interno dell'oggetto di risposta, sono contenuti i dati desiderati. Quindi li assegniamo al valore di person. Possiamo anche raccogliere informazioni aggiuntive sulla richiesta, come il codice di stato sotto res.status o ulteriori informazioni da res.request.
Successivamente, dobbiamo aggiungere il nostro componente al file principale App.js . Aggiungi il seguente codice:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
La configurazione per questo passaggio è completata. Ora puoi avviare l'app e testarla usando il tuo browser preferito. Avvia il server di sviluppo:
|
1 |
npm start |
Come possiamo vedere, l'output mostra un elenco di nomi di persone in ordine casuale:
Passo 3: Costruire una richiesta POST
In questa sezione, mostreremo come utilizzare Axios per eseguire un altro metodo di richiesta HTTP chiamato POST. Per dimostrarlo, il nostro obiettivo è creare un nuovo componente nel nostro progetto React chiamato PersonAdd.
Crea il file PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Quindi, apri il file in un editor di testo e inserisci il seguente codice:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd extends React.Component { state = { name: '' } handleChange = event => { this.setState({ name: event.target.value }); } handleSubmit = event => { event.preventDefault(); const user = { name: this.state.name }; axios.post(`https://jsonplaceholder.typicode.com/users`, { user }) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Nome persona: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Aggiungi</button> </form> </div> ) } } |
In questo codice, prendiamo l'input dell'utente e inviamo il contenuto tramite POST a un'API. All'interno della funzione handleSubmit, stiamo impedendo l'azione predefinita del form e aggiornando lo stato con l'input dell'utente. Quando si usa POST viene restituito lo stesso oggetto di risposta. Possiamo usare l'oggetto all'interno di una chiamata then. Per soddisfare la richiesta POST, stiamo catturando l'input dell'utente e lo stiamo aggiungendo insieme alla richiesta POST. Questo ci fornisce una risposta. Registriamo la risposta usando console.log. Dovrebbe mostrare l'input dell' utente nel modulo.
Successivamente, aggiungi il componente a App.js. Il codice completo dovrebbe apparire così:
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
Ora è il momento di testare le modifiche. Avvia il server di sviluppo:
|
1 |
npm start |
Verifica la modifica sul browser web:
Passo 4: Costruire una richiesta DELETE
In questa sezione, mostreremo come eliminare elementi da un'API con l'aiuto di axios.delete e utilizzando un URL come parametro. Per dimostrarlo, crea il componente PersonRemove. Crea il file PersonRemove.js nella directory src/components:
|
1 |
touch src/components/PersonRemove.js |
Dopodiché, apri il file in un editor di testo e aggiungi il seguente codice:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove extends React.Component { state = { id: '' } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = event => { event.preventDefault(); axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Persona ID: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Elimina</button> </form> </div> ) } } |
Qui, l'oggetto res offre le informazioni sulla richiesta. Possiamo quindi utilizzare console.log dopo l'invio del modulo.
Successivamente, implementa il componente in App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
È ora di testare nuovamente il nostro codice. Avvia il server:
|
1 |
npm start |
Dovresti trovare un nuovo modulo che accetta il nome dell’utente e lo rimuove dall’elenco:
Passo 5: Applicare l'istanza di base in Axios
Ora lavoreremo con l'istanza di base di Axios. Qui possiamo definire un URL e altri elementi di configurazione. Per implementarla, crea un file separato api.js:
|
1 |
touch src/api.js |
Aprilo in un editor di testo e inserisci il seguente codice:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Una volta impostato, possiamo usarlo all'interno del componente PersonRemove . Ecco come apparirà il codice:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } |
Qui, http://jsonplaceholder.typicode.com/ è impostato come URL di base. Ora non abbiamo più bisogno di usare l'URL completo ogni volta che raggiungiamo un endpoint dell'API.
Passo 6: Implementare async e await
In questa sezione vedremo come implementare async e await per lavorare con le promise. La parola chiave await risolve la promise e restituisce il valore. Possiamo assegnare questo valore a una variabile per un utilizzo più comodo.
Ecco come apparirà il codice aggiornato di PersonRemove.js :
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
Qui abbiamo sostituito .then(). Una volta che promise viene risolta, memorizziamo il valore nella variabile response.
Considerazioni finali
In questo tutorial, abbiamo esplorato vari esempi di utilizzo di Axios per lavorare con le API REST. I codici mostrano la creazione di richieste HTTP e la gestione delle risposte.
Vuoi saperne di più su JavaScript? Dai un'occhiata alle nostre altre guide per principianti su vari concetti e funzionalità di JavaScript, ad esempio, data e ora, manipolazione delle stringhe, classi, e oggetti.
Buona programmazione!
Commenti
Ancora nessun commento. Scrivi il primo.