Come Fare Una Richiesta Di Posta In Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Quando crei un’applicazione web, potrebbe venire il momento in cui desideri eseguire una richiesta HTTP per accedere a una risorsa esterna. Ad esempio, supponi di creare un blog. Potresti voler chiamare un’API per recuperare un elenco di commenti da mostrare su ogni post del blog.

Axios è una popolare libreria JavaScript che puoi utilizzare per effettuare richieste web. In questa guida, spiegheremo come utilizzare axios per effettuare una richiesta GET. Esamineremo alcuni esempi per mostrare come funziona axios e come puoi utilizzarlo nel tuo codice.

Perché Axios?

Axios è una libreria basata su promesse che lo rende facile fare richieste web.

Forse ti starai chiedendo: perché dovrei usare axios su una delle tante altre librerie di richieste web là fuori? è vero che ci sono altre librerie come fetch che puoi usare per fare richieste GET, ma axios ha una serie di vantaggi che queste librerie non hanno.

Axios supporta i browser meno recenti, che ti consentirà di creare un’esperienza utente più accessibile. Axios è inoltre dotato di protezione CSRF integrata per prevenire le vulnerabilità. Funziona anche in Node.js, il che lo rende perfetto se stai sviluppando applicazioni web sia front-end che back-end.

Come installare Axios

Prima di creare un GET richiesta utilizzando axios, dovrai installare la libreria. Puoi farlo usando il seguente comando:

Questo comando installerà axios e lo salverà nel file package.json locale. Ora sei pronto per iniziare a utilizzare la libreria axios.

Come effettuare una richiesta utilizzando Axios

Iniziare con axios è semplice. Per effettuare una richiesta web, è sufficiente specificare l’URL da cui si desidera richiedere i dati e il metodo che si desidera utilizzare.

Supponiamo di voler recuperare un elenco di fatti casuali sui gatti da cat-facts. Potremmo farlo usando questo codice:

Questo codice restituisce una promessa che rappresenta una richiesta che non è stata ancora completato. Per recuperare i dati da questa richiesta HTTP, dovresti utilizzare una funzione asincrona/attendi in questo modo:

Il server ha risposto wi con un elenco di fatti sui gatti.

Quando chiamiamo questa funzione, viene inviata una richiesta HTTP GET all’API cat-facts. Usiamo una funzione asincrona/attendi quindi il nostro programma non continua fino a quando la richiesta web non è stata completata. Questo perché axios restituisce prima una promessa. Restituisce i dati della richiesta effettuata dopo che la richiesta è stata completata.

La libreria axios include alcuni comandi abbreviati che puoi utilizzare per effettuare richieste web:

In questo tutorial, ci concentreremo su axios.get () e axios.post(), che utilizzano la stessa sintassi di base di tutti gli altri metodi abbreviati.

Effettuare richieste GET utilizzando axios

Nel nostro ultimo esempio, abbiamo utilizzato axios per effettuare una richiesta GET. Ma c’è un modo più semplice per fare una richiesta GET con axios: usando axios.get().

Supponiamo di voler recuperare un elenco di fatti sui gatti, poi conta quanti sono stati restituiti. Puoi farlo usando il seguente codice:

Il codice ha generato questa risposta: 225 cat fact sono stati restituiti.

Scomponiamo il nostro codice. Per prima cosa abbiamo dichiarato una funzione asincrona chiamata getCatFacts() in cui effettuiamo una richiesta web.

Utilizziamo quindi axios.get() per recuperare un elenco di fatti cat dall’API cat-facts; "response.data" contiene gli oggetti di risposta e il corpo della richiesta dalla nostra richiesta.

Infine, usiamo l’attributo .length per calcolare quanti fatti sui gatti sono stati restituiti dalla nostra richiesta. Quindi aggiungiamo questo numero alla stringa "i fatti sui gatti sono stati restituiti.

Invio di intestazioni utilizzando axios

Quando si effettua una richiesta GET, potrebbe essere necessario inviare un’intestazione personalizzata alla risorsa Web a cui si sta effettuando la richiesta. un’API che richiede l’autenticazione. Potrebbe essere necessario specificare un’intestazione di autenticazione.

< p>Per specificare un’intestazione con una richiesta axios, puoi utilizzare il seguente codice:

Questo codice invierebbe l’intestazione "header-name&rdquo ; con il valore "header-value" all’URL che abbiamo specificato.

Invio di parametri utilizzando axios

Molte API consentono di inviare parametri in una richiesta GET. Ad esempio, un’API può consentire di limitare il numero di risposte restituite utilizzando un parametro limit.

Specificare un parametro da inviare con una richiesta Web è facile utilizzando axios. è possibile includere il parametro come stringa di query o utilizzare la proprietà params. Ecco un esempio di axios che effettua una richiesta web utilizzando stringhe di query per specificare un parametro:

In alternativa, puoi specificare una proprietà params nelle opzioni axios usando questo codice:

Entrambi questi esempi inviano un parametro con il nome "date" e il valore "2020-05-15" all’URL specificato.

Come fare una richiesta POST usando axios

La sintassi per fare una richiesta POST è la stessa di una richiesta GET. La differenza è che dovresti usare il axios.post() invece di axios.get().

Supponiamo di voler inviare una richiesta di pubblicazione a un’API. Puoi farlo usando questo codice:

Puoi specificare intestazioni e parametri nello stesso modo in cui faresti una richiesta GET. Supponiamo che tu voglia inviare l’intestazione "Nome" con il valore "James" con la tua richiesta POST. Puoi farlo utilizzando questo codice:

Conclusione

La libreria axios viene utilizzata per effettuare richieste web in JavaScript. Può essere utilizzato sia sul front-end utilizzando JavaScript che sul back-end utilizzando una piattaforma come Node.js. A differenza di altre librerie di richieste Web, axios ha una protezione CSRF integrata, supporta i browser meno recenti e utilizza una struttura di promessa. è perfetto per fare richieste web.

Ora sei pronto per iniziare a fare richieste GET e POST usando axios come uno sviluppatore web professionista.