Come effettuare le richieste HTTP in JavaScript usando Axios | Spiegato con esempi

Axios è rigorosamente una libreria JavaScript basata sulla promessa che può essere inclusa nel progetto utilizzando il Node Package Manager (NPM) O Axios ospitati in CDN. Viene utilizzato per rendere XMLHTTPREQUEST dal browser e le richieste HTTP per i progetti creati con NodeJS. Poiché può funzionare con entrambi i progetti di nodi e per i browser, viene spesso definito come un Modulo isomorfo.

È un client HTTP, il che significa che possiamo usare il suo OTTENERE, INVIARE, E ELIMINARE metodi per interagire con le API

Impostazione degli assios nel tuo progetto

Se stai lavorando con il pacchetto nodo Gestisci, puoi scaricare assios digitando il comando seguente nel terminale dell'editor di codice:

$ npm Installa assios

Se stai lavorando con Vanilla JavaScript, puoi includere gli assios ospitati CDN nel tuo file HTML utilizzando la riga seguente:

Anche per testare gli assios, useremo l'API finta fornita da Req | Res. E l'URL dell'API è “https: // reqres.in/API/utenti ".

Dal momento che è un tutorial per mostrarti come lavorare con gli assios per effettuare richieste HTTP, pertanto non manipoteremo con gli elementi HTML. Abbiamo solo le seguenti righe nella pagina web HTML:

Richieste Axios HTTP

Ottieni una richiesta con assios

Produrre OTTENERE Richieste all'API usando API Utilizziamo la seguente sintassi:

assios.Ottieni (URL).Quindi (risposta => ).catch (errore => ());

Usiamo questa sintassi per effettuare una richiesta OTTIENI al REQ | API dell'utente Res:

assios.get ("https: // reqres.in/api/utenti ").Quindi ((risposta) =>
const utenti = risposta.dati.dati;
console.log ('Get Users', utenti);
).catch ((errore) => console.errore (errore));

Ma vogliamo avvolgere questo metodo Ottieni in una funzione, quindi usa le seguenti righe di codice:

const getUSers = () =>
assios
.get ("https: // reqres.in/api/utenti ")
.Quindi ((risposta) =>
const utenti = risposta.dati.dati;
console.log ('Get Users', utenti);
)
.catch ((errore) => console.errore (errore));
;

Ora, tutto ciò che dobbiamo fare è chiamare la funzione getUesrs () con la seguente riga di codice:

getUSers ();

Eseguendo il file HTML, vedrai i seguenti risultati:

Se espandiamo questa voce, saremo in grado di vedere la risposta dell'API molto più chiaramente:

Abbiamo fatto un successo OTTENERE Richiedi utilizzando assios e stampato la risposta alla console.

Post Richiesta con assios

Per effettuare una richiesta post con assios, è necessario utilizzare la seguente sintassi:

assios.POST (URL).Quindi ((risposta) => ).catch ((errore));

Per fare una richiesta post al Req | res api, Utilizziamo le seguenti righe di codice che creerà un nuovo utente:

const createUser = (user) =>
assios
.post ("https: // reqres.In/API/Users ", utente)
.Quindi ((risposta) =>
const aggiungi = risposta.dati;
console.log ('post: utente viene aggiunto', aggiunto);
)
.catch ((errore) => console.errore (errore));
;

Per invocare questo Richiesta post, Dobbiamo chiamare questa funzione creare un utente(), Ma prima di farlo, dobbiamo controllare l'API su quale tipo di JSON accetta per una nuova creazione di utenti. Quindi, sul sito Web REQ | REQ possiamo vedere il seguente formato JSON per la richiesta di post:

Ci vuole un "nome" coppia di valore chiave e una coppia di valore chiave "lavoro". Chiamiamo il creare un utente() funzione con JSON appropriato al suo interno:

creare un utente(
Nome: "John Doe",
Giobbe: "revisore dei conti",
);

Esegui il file e vedrai il seguente risultato sulla console del browser:

Ecco, siamo stati in grado di inviare un INVIARE Richiesta a un'API che utilizza assios.

Elimina la richiesta con assios

Per effettuare richieste di eliminazione con assios nell'API è necessario utilizzare la seguente sintassi

assios.Elimina (URL).Quindi ((risposta) => ).catch ((errore) => ());

Per effettuare la richiesta di eliminazione all'API REQ | RES, utilizzare le seguenti righe di codice:

const deleteUser = (id) =>
assios
.delete ('https: // reqres.IN/API/USUSS/$ id ')
.Quindi ((risposta) =>
console.log ('elimina: l'utente viene rimosso', id);
)
.catch ((errore) => console.errore (errore));
;

Tutto quello che dobbiamo fare è invocare la funzione elimina Using della riga seguente:

deleteuser (2);

Esegui il file e osserva il risultato sulla console del browser:

Ecco qua, abbiamo fatto con successo una richiesta di eliminazione a un'API usando Axios.

Conclusione

Axios è un client HTTP che può essere incluso nei progetti del nodo utilizzando il gestore dei pacchetti nodi o nel progetto Vanilla JavaScript utilizzando gli assios ospitati CDN. Axios viene utilizzato per creare XMLHTTPREQUESTS a un'API ed è rigorosamente una libreria basata sulla promessa. In questo post, abbiamo imparato a interagire con un'API esterna usando assios e fare diversi OTTENERE, INVIARE E ELIMINARE richieste a API.