Ecco i modi più diffusi per effettuare una richiesta HTTP in JavaScript

JavaScript ha ottimi moduli e metodi per effettuare richieste HTTP che possono essere utilizzate per inviare o ricevere dati da una risorsa lato server. In questo articolo, esamineremo alcuni modi popolari per effettuare richieste HTTP in JavaScript.

Ajax

Ajax è il modo tradizionale per effettuare una richiesta HTTP asincrona. I dati possono essere inviati utilizzando il metodo HTTP POST e ricevuti utilizzando il metodo HTTP GET. Diamo un'occhiata e facciamo una GETrichiesta. Userò JSONPlaceholder, un'API REST online gratuita per sviluppatori che restituisce dati casuali in formato JSON.

Per effettuare una chiamata HTTP in Ajax, è necessario inizializzare un nuovo XMLHttpRequest()metodo, specificare l'endpoint dell'URL e il metodo HTTP (in questo caso GET). Infine, utilizziamo il open()metodo per collegare il metodo HTTP e l'endpoint dell'URL e chiamare il send()metodo per attivare la richiesta.

Registriamo la risposta HTTP alla console utilizzando la XMLHTTPRequest.onreadystatechangeproprietà che contiene il gestore di eventi da chiamare quando l' readystatechangedevento viene attivato.

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }

Se visualizzi la console del browser, restituirà un array di dati in formato JSON. Ma come faremmo a sapere se la richiesta è stata fatta? In altre parole, come possiamo gestire le risposte con Ajax?

La onreadystatechangestruttura dispone di due metodi, readyStatee statusche ci permettono di verificare lo stato della nostra richiesta.

Se readyStateè uguale a 4, significa che la richiesta è stata eseguita. La readyStatestruttura ha 5 risposte. Scopri di più qui.

Oltre a effettuare direttamente una chiamata Ajax con JavaScript, esistono altri metodi più potenti per effettuare una chiamata HTTP, come il $.Ajaxmetodo jQuery. Ne discuterò ora.

metodi jQuery

jQuery ha molti metodi per gestire facilmente le richieste HTTP. Per utilizzare questi metodi, dovrai includere la libreria jQuery nel tuo progetto.

$ .ajax

jQuery Ajax è uno dei metodi più semplici per effettuare una chiamata HTTP.

Il metodo $ .ajax accetta molti parametri, alcuni dei quali sono obbligatori e altri facoltativi. Contiene due opzioni di richiamata successe errorper gestire la risposta ricevuta.

$ .get metodo

Il metodo $ .get viene utilizzato per eseguire le richieste GET. Accetta due parametri: l'endpoint e una funzione di callback.

$ .post

Il $.postmetodo è un altro modo per inviare dati al server. Ci vogliono tre parametri: il url, i dati che vuoi pubblicare e una funzione di callback.

$ .getJSON

Il $.getJSONmetodo recupera solo i dati in formato JSON. Accetta due parametri: urle una funzione di callback.

jQuery ha tutti questi metodi per richiedere o inviare dati a un server remoto. Ma puoi effettivamente mettere tutti questi metodi in uno: il $.ajaxmetodo, come mostrato nell'esempio seguente:

fetch

fetchè una nuova potente API Web che ti consente di effettuare richieste asincrone. In effetti, fetchè uno dei modi migliori e il mio preferito per effettuare una richiesta HTTP. Restituisce una "promessa" che è una delle grandi caratteristiche di ES6.Se non hai familiarità con ES6, puoi leggerlo in questo articolo. Le promesse ci consentono di gestire la richiesta asincrona in modo più intelligente. Diamo un'occhiata a come fetchfunziona tecnicamente.

La fetchfunzione accetta un parametro obbligatorio: l' endpointURL. Ha anche altri parametri opzionali come nell'esempio seguente:

Come puoi vedere, fetchha molti vantaggi per effettuare richieste HTTP. Puoi saperne di più qui. Inoltre, all'interno di fetch ci sono altri moduli e plugin che ci permettono di inviare e ricevere una richiesta da e verso il lato server, come axios.

Axios

Axios è una libreria open source per effettuare richieste HTTP e fornisce molte ottime funzionalità. Diamo un'occhiata a come funziona.

Utilizzo:

Innanzitutto, dovresti includere Axios. Esistono due modi per includere Axios nel progetto.

Innanzitutto, puoi usare npm:

npm install axios --save

Quindi dovresti importarlo

import axios from 'axios'

In secondo luogo, puoi includere axios usando un CDN.

Fare una richiesta con axios:

Con Axios puoi utilizzare GETe POSTper recuperare e inviare dati dal server.

OTTENERE:

axiosaccetta un parametro obbligatorio e può richiedere anche un secondo parametro opzionale. Questo prende alcuni dati come una semplice query.

INVIARE:

Axios restituisce una "promessa". Se hai familiarità con le promesse, probabilmente sai che una promessa può eseguire più richieste. Puoi fare la stessa cosa con axios ed eseguire più richieste allo stesso tempo.

Axios supporta molti altri metodi e opzioni. Puoi esplorarli qui.

Angular HttpClient

Angular has its own HTTP module that works with Angular apps. It uses the RxJS library to handle asynchronous requests and provides many options to perform the HTTP requests.

Making a call to the server using the Angular HttpClient

To make a request using the Angular HttpClient, we have to run our code inside an Angular app. So I created one. If you’re not familiar with Angular, check out my article, learn how to create your first Angular app in 20 minutes.

The first thing we need to do is to import HttpClientModule in app.module.ts

Then, we have to create a service to handle the requests. You can easily generate a service using Angular CLI.

ng g service FetchdataService

Then, we need to import HttpClient in fetchdataService.ts service and inject it inside the constructor.

And in app.component.ts import fetchdataService

//import import { FetchdataService } from './fetchdata.service';

Finally, call the service and run it.

app.component.ts:

You can check out the demo example on Stackblitz.

Wrapping Up

We’ve just covered the most popular ways to make an HTTP call request in JavaScript.

Thank you for your time. If you like it, clap up to 50, click follow, and reach out to me on Twitter.

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — [email protected].