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

Articolo originale: Here are the most popular ways to make an HTTP request 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 richiesta GET. 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 oggetto con  new XMLHttpRequest(), specificare l'URL  finale e il metodo HTTP (in questo caso GET). Infine, utilizzare il metodo open() per collegare insieme il metodo HTTP e URL finale e chiamare il metodo send()  per inviare la richiesta.

Inviamo la risposta HTTP alla console utilizzando la proprietà XMLHTTPRequest.onreadystatechange che contiene il gestore di eventi da chiamare quando viene generato l'evento readystatechanged .

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Nella console del browser,  verrà restituita un array di dati in formato JSON. Ma come facciamo a sapere se la richiesta è soddisfatta? In altre parole, come possiamo gestire le risposte con l'Ajax?

La proprietà onreadystatechange dispone, a sua volta, di due metodi: readyState e statusche ci consentono di verificare lo stato della nostra richiesta.

Se readyState è uguale a 4, significa che la richiesta è stata eseguita. La proprietà readyState dispone di 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, ad esempio con $.Ajax che è un metodo 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.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Il metodo $.ajax

In 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 callback success e error per gestire la risposta ricevuta.

Il metodo $.get

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

Il metodo $.post

Il metodo $.post è un altro modo per inviare dati al server. Occorrono tre parametri: l'url, i dati che vuoi pubblicare e una funzione di callback.

Il metodo $.getJSON

Il metodo $.getJSON recupera solo i dati in formato JSON. Richiede due parametri: url e 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 metodo $.ajax, 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 ed è il mio preferito per effettuare una richiesta HTTP. Restituisce una "Promise" 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 un modo più intelligente. Diamo un'occhiata a come funziona tecnicamente fetch.

La funzione fetch accetta un parametro obbligatorio: l'URL  endpoint. Ha anche altri parametri opzionali come nell'esempio seguente:

Come puoi vedere, fetch ha molti vantaggi per fare richieste HTTP. Puoi saperne di più qui . Inoltre, all'interno di fetch ci sono altri moduli e plugin che ci consentono 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 offre molte fantastiche funzionalità. Diamo un'occhiata a come funziona.

Utilizzo:

Innanzitutto, dovresti includere Axios. Ci sono due modi per includere Axios nel tuo progetto.

In primo luogo, puoi usare npm:

npm install axios --save

Quindi dovresti importarlo

import axios from 'axios'

In secondo luogo, puoi includere axios usando un CDN.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Fare una richiesta con axios:

Con Axios puoi utilizzare GET e POST per recuperare e inviare dati dal server.

GET:

axios richiede un parametro e può accettare anche un secondo parametro facoltativo. Questo prende alcuni dati come una semplice query.

POST:

Axios restituisce una "Promise". 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 contemporaneamente.

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

HttpClient Angular

Angular ha il proprio modulo HTTP che funziona con le app Angular. Utilizza la libreria RxJS per gestire le richieste asincrone e fornisce molte opzioni per eseguire le richieste HTTP.

Effettuare una chiamata al server utilizzando Angular HttpClient

Per effettuare una richiesta utilizzando Angular HttpClient, dobbiamo eseguire il nostro codice all'interno di un'app Angular. Quindi ne ho creata una. Se non hai familiarità con Angular, dai un'occhiata al mio articolo, scopri come creare la tua prima app Angular in 20 minuti .

La prima cosa che dobbiamo fare è importare HttpClientModule in app.module.ts

Quindi, dobbiamo creare un servizio per gestire le richieste. Puoi facilmente generare un servizio utilizzando Angular CLI .

ng g service  FetchdataService

Quindi, dobbiamo importare HttpClient nel servizio fetchdataService.ts e inserirlo all'interno del costruttore.

E in app.component.ts importare fetchdataService

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

Infine, chiamare il servizio ed eseguirlo.

app.component.ts:

Puoi dare un'occhiata all'esempio demo su Stackblitz .

Ricapitolando

Abbiamo appena illustrato i modi più popolari per effettuare una richiesta di chiamata HTTP in JavaScript.

Grazie per il tuo tempo. Se ti piace, puoi seguirmi su Twitter.