In React, la comunicazione backend viene generalmente ottenuta utilizzando il protocollo HTTP. Sebbene molti sviluppatori abbiano familiarità con l'interfaccia di richiesta HTTP XML e l'API Fetch per effettuare richieste HTTP, esiste un'altra potente libreria chiamata Axios che semplifica ulteriormente il processo.
Tabella dei contenuti
- Prerequisiti
- Introduzione ad Axios
- Passaggi per creare un'applicazione React
- Necessità di Axios in React
- Richiesta GET con Axios
- Richiesta POST con Axios:
- Elimina richiesta con Axios:
- Oggetti di risposta in Axios
- Oggetto errore:
- Caratteristiche della libreria Axios
- Metodi stenografici in Axios
- Conclusione
Introduzione ad Axios:
Axios, una libreria popolare, viene utilizzata principalmente per inviare richieste HTTP asincrone agli endpoint REST. Questa libreria è molto utile per eseguire operazioni CRUD.
- Questa libreria popolare viene utilizzata per comunicare con il backend. Axios supporta l'API Promise, nativa di JS ES6.
- Utilizzando Axios effettuiamo richieste API nella nostra applicazione. Una volta effettuata la richiesta, otteniamo i dati in Return e quindi utilizziamo questi dati nel nostro progetto.
- Questa libreria è molto popolare tra gli sviluppatori. Puoi controllare su GitHub e troverai 78k stelle.
Prima di installare Axios, l'app del progetto React dovrebbe essere pronta per installare questa libreria. Creare un Reagire applicazione seguendo i passaggi indicati di seguito...
Passaggi per creare un'applicazione React:
Passo 1: Di seguito è riportato il comando per creare l'app React nel tuo progetto...
npx create-react-app myreactapp>
Passo 2: Entra nella directory creata nel primo passaggio.
cd myreactapp>
Passaggio 3: Installa la libreria Axios utilizzando il comando indicato di seguito...
npm i axios>
Struttura del progetto:
età rekha
Le dipendenze aggiornate in pacchetto.json file.
'dependencies': { '@testing-library/jest-dom': '^5.17.0', '@testing-library/react': '^13.4.0', '@testing-library/user-event': '^13.5.0', 'axios': '^1.6.2', 'react': '^18.2.0', 'react-dom': '^18.2.0', 'react-scripts': '5.0.1', 'web-vitals': '^2.1.4' },> Esempio: Questo frammento di codice utilizza axios per effettuare una richiesta HTTP al server backend.
Javascript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> class App extends React.Component {> >state = {> >newfiles:>null>,> >};> >handleFile(e) {> >// Getting the files from the input> >let newfiles = e.target.newfiles;> >this>.setState({ newfiles });> >}> >handleUpload(e) {> >let newfiles =>this>.state.newfiles;> >let formData =>new> FormData();> >// Adding files to the formdata> >formData.append(>'image'>, newfiles);> >formData.append(>'name'>,>'Name'>);> >axios({> >// Endpoint to send files> >url:>' http://localhost:8080/files '>,> >method:>'POST'>,> >headers: {> >// Add any auth token here> >authorization:>'your token comes here'>,> >},> >// Attaching the form data> >data: formData,> >})> >// Handle the response from backend here> >.then((res) =>{})> >// Catch errors if any> >.>catch>((err) =>{});> >}> >render() {> >return> (> >> >> > type='file' // To select multiple files multiple='multiple' onChange={(e) =>this.handleFile(e)} /> onClick={(e) => this.handleUpload(e)}> Invia file ); } } esporta l'app predefinita;> |
>
>
Passaggi per eseguire l'applicazione: Apri il terminale e digita il seguente comando.
npm start>
Produzione: Apri il browser e il nostro progetto viene mostrato nell'URL http://localhost:3000/
L'esempio sopra è solo una piccola descrizione del codice per mostrare come utilizzare Axios nel tuo progetto. Discuteremo più metodi come GET, POST e PUT in Axios nella prossima sezione.
Necessità di Axios in React:
Come abbiamo discusso, Axios ti consente di comunicare con le API nel tuo progetto React. Le stesse attività possono essere eseguite anche utilizzando AJAX, ma Axios fornisce più funzionalità e caratteristiche e questo ti aiuta a creare rapidamente la tua applicazione.
Axios è una libreria basata su promesse, quindi è necessario implementare alcune richieste HTTP asincrone basate su promesse. Anche jQuery e AJAX eseguono lo stesso lavoro, ma nel progetto React React gestisce ogni cosa nel proprio DOM virtuale, quindi non è affatto necessario utilizzare jQuery.
Di seguito è riportato un esempio per recuperare i dati del cliente utilizzando Axios...
Javascript
Java trasforma il carattere in una stringa
const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>console.log(errore));> };> getCustomersData();> |
>
>
Veniamo ora al punto successivo e capiamo come possono essere eseguite diverse operazioni come il recupero dei dati o il consumo dei dati utilizzando Axios (GET-POST-DELETE).
Richiesta GET con Axios:
Crea un componente MyBlog e collegalo al ciclo di vita del componente DidMount. Importa Axios in alto e recupera i dati con Ottieni richiesta.
Javascript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class MyList extends React.Component {> >state = {> >blogs: [],> >};> >componentDidMount() {> >axios> >.get(> >`https:>//jsonplaceholder.typicode.com/posts`> >)> >.then((response) =>{> >const posts = response.data;> >this>.setState({ posts });> >});> >}> >render() {> >return> (> >>> >{>this>.state.posts.map((post) =>{> >post.title;> >})}> >>>);> >}> }> |
>
>
Qui utilizziamo axios.get (URL) per ottenere una promessa che restituisce un oggetto risposta. La risposta restituita viene assegnata all'oggetto del post. Possiamo anche recuperare altre informazioni come il codice di stato, ecc.
Richiesta POST con Axios:
Crea un nuovo componente AddPost per le richieste di post. Questa richiesta aggiungerà un post all'elenco dei post.
Javascript
variabile di riferimento in Java
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class AddPost extends React.Component {> >state = {> >postTitle:>''>,> >};> >handleChange = (event) =>{> >this>.setState({ postTitle: event.target.value });> >};> >handleSubmit = (event) =>{> >event.preventDefault();> >const post = {> >postName:>this>.state.postName,> >};> >axios> >.post(> >`https:>//jsonplaceholder.typicode.com/posts`,> >{ post }> >)> >.then((res) =>{> >console.log(res);> >console.log(res.data);> >});> >};> >render() {> >return> (> >> >'{this.handleSubmit}'>Nome articolo: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }> |
>
>
Nel codice precedente, abbiamo effettuato una richiesta HTTP Post e aggiunto un nuovo post al database. L'evento onChange attiva il metodo handleChange() e aggiorna la richiesta quando la richiesta API restituisce i dati con successo.
Elimina richiesta con Axios:
Per inviare la richiesta di eliminazione al server viene utilizzato axios.delete. È necessario specificare due parametri durante la creazione dell'URL di richiesta e della configurazione opzionale.
axios.delete(url, { data: { foo: 'bar' }, headers: { 'Authorization': '******' } });> Durante l'invio della richiesta di eliminazione dovrai impostare il corpo e le intestazioni della richiesta. Utilizzare config.data per questo scopo. Nella richiesta POST sopra, modificare il codice come indicato di seguito...
Javascript
stampa da Java
handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }> |
>
>
Oggetti di risposta in Axios:
Quando invii una richiesta al server, ricevi un oggetto di risposta dal server con le proprietà indicate di seguito...
- dati: Ricevi i dati dal server sotto forma di payload. Questi dati vengono restituiti in formato JSON e analizzati nuovamente in un oggetto JavaScript.
- stato: Ottieni il codice HTTP restituito dal server.
- testo di stato: Messaggio di stato HTTP restituito dal server.
- intestazioni: Tutte le intestazioni vengono rispedite dal server.
- configurazione: configurazione della richiesta originale.
- richiesta: oggetto XMLHttpRequest effettivo.
Oggetto errore:
Riceverai un oggetto errore se si verifica un problema con la richiesta. La promessa verrà rifiutata con un oggetto errore con le proprietà specificate
- Messaggio: Testo del messaggio di errore.
- risposta: Oggetto risposta (se ricevuto).
- richiesta: Oggetto XMLHttpRequest effettivo (quando eseguito in un browser).
- configurazione: Configurazione della richiesta originale.
Caratteristiche della libreria Axios
- I dati JSON vengono trasformati automaticamente.
- Trasforma i dati di richiesta e risposta.
- Utile per effettuare richieste HTTP da Node.js
- Effettua XMLHttpRequests dal browser.
- Fornire supporto lato client per la protezione da XSRF.
- Supporta l'API promessa.
- Possibilità di annullare la richiesta.
Metodi abbreviati in Axios:
Di seguito sono riportati alcuni metodi abbreviati di Axios...
- axios.request(config)
- axios.head(url[, configurazione])
- axios.get(url[, configurazione])
- axios.post(url[, dati[, configurazione]])
- axios.put(url[, dati[, configurazione]])
- axios.delete(url[, configurazione])
- axios.options(url[, configurazione])
- axios.patch(url[, dati[, configurazione]])
Conclusione
Questo articolo spiega tutto sulla libreria Axios. Abbiamo discusso alcune operazioni utili come il recupero dei dati, la pubblicazione dei dati, l'aggiornamento dei dati o l'eliminazione dei dati in Axios. Una volta che inizierai a lavorare su React, dovrai utilizzare questa libreria per comunicare con il server del database. Quindi è importante metterlo in pratica e capire come funzionano le cose in Axios.