L’interazione tra il frontend e il backend dei siti web è resa possibile dalle richieste HTTP. Funzionalità come l’aggiornamento di un nuovo/vecchio utente in un database, la pubblicazione di un post sul blog dalla bacheca di WordPress, l’eliminazione di una foto dal proprio profilo e l’aggiornamento della biografia richiedono un’interazione tra un server e un client per modificare i dati.

Quando realizziamo applicazioni web, sia frontend che full stack, spesso interagiamo con dati archiviati in diversi database e server. Questi server possono appartenere a terzi o essere creati dagli sviluppatori di un progetto.

Per interagire con questi server, possiamo utilizzare diversi metodi HTTP per richiedere dati. Possiamo creare, leggere, aggiornare e cancellare (o CRUD) i dati sui server utilizzando verbi HTTP dedicati come POST, GET, PUT/PATCH e DELETE.

In questo tutorial impareremo i vari modi con cui fare richieste HTTP a server remoti ed eseguire operazioni CRUD in JavaScript.

Ogni sezione introdurrà un nuovo metodo per inviare richieste HTTP. Inizieremo dai metodi integrati come l’API fetch e l’oggetto XMLHttpRequest prima di esaminare alcune librerie di richieste HTTP open-source come Axios e SuperAgent.

Iniziamo!

Cos’è una Richiesta HTTP in JavaScript?

Le richieste HTTP in JavaScript sono un insieme di metodi predefiniti utilizzati per interagire con i dati memorizzati sui server.

Ogni richiesta inviata a un server include un endpoint e il tipo di richiesta inviata. Un endpoint può essere visto come un gateway tra due programmiː il client e il server.

Il client è il programma che invia la richiesta, mentre il server è quello che la riceve. Il server invia una risposta in base alla validità della richiesta. Se la richiesta va a buon fine, il server invia i dati in formato XML o JSON (JSON nella maggior parte dei casi); se la richiesta fallisce, il server invia un messaggio di errore.

Le risposte inviate dal server sono solitamente associate a codici di stato. Questi codici ci aiutano a capire cosa sta cercando di dire il server quando riceve una richiesta. Eccone alcuni e il loro significato:

  • 100-199 indica una risposta informativa.
  • 200-299 indica una richiesta andata a buon fine.
  • 300-399 indica un reindirizzamento.
  • 400-499 indica un errore del cliente.
  • 500-599 indica un errore del server.

Ne parleremo più approfonditamente nelle sezioni seguenti.

Nella prossima sezione vedremo i diversi modi in cui è possibile effettuare richieste HTTP in JavaScript.

Come Fare una Richiesta HTTP in JavaScript

Questa sezione sarà suddivisa in sottosezioni, ognuna delle quali vi spiegherà i diversi metodi da utilizzare per effettuare richieste HTTP in JavaScript.

Ogni metodo discusso avrà un esempio che mostra come inviare richieste POST, GET, PUT/PATCH e DELETE ai server.

JSON Placeholder fungerà da server/endpoint remoto dove verranno inviate tutte le nostre richieste.

Tuffiamoci!

1. Come Fare una Richiesta HTTP in JavaScript Usando XMLHttpRequest (AJAX)

XMLHttpRequest è un oggetto JavaScript integrato utilizzato per interagire con i server e caricare i contenuti delle pagine web senza ricaricare il browser.

In questa sezione vedremo come inviare richieste POST, GET, PUT/PATCH e DELETE utilizzando XMLHttpRequest.

AJAX viene utilizzato per effettuare richieste HTTP asincrone. Ciò significa semplicemente che mentre la risposta di una richiesta è in attesa, altre parti del vostro codice JavaScript possono continuare a funzionare senza aspettare che la richiesta venga completata.

Utilizzando AJAX è anche possibile apportare modifiche a una particolare sezione della vostra pagina web senza costringere il visitatore a ricaricare l’intera pagina.

AJAX, per impostazione predefinita, funziona con l’oggetto XMLHttpRequest, quindi gli esempi di questa sezione possono essere considerati come richieste AJAX.

Come Inviare una Richiesta GET in JavaScript Utilizzando XMLHttpRequest

La richiesta GET viene utilizzata quando si desidera recuperare dei dati da un server. Per inviare una richiesta GET con successo utilizzando XMLHttpRequest in JavaScript, è necessario assicurarsi che le seguenti operazioni siano eseguite correttamente:

  1. Creare un nuovo oggetto XMLHttpRequest.
  2. Aprire una connessione specificando il tipo di richiesta e l’endpoint (l’URL del server).
  3. Inviare la richiesta.
  4. Ascoltare la risposta del server.

Ora che abbiamo visto alcuni dei passaggi necessari per inviare una richiesta POST utilizzando XMLHttpRequest, vediamo un esempio di codiceː

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

Scomponiamo il codice qui sopra per capire meglio cosa sta succedendo.

La prima cosa da fare è creare un nuovo oggetto XMLHttpRequest e memorizzarlo in una variabile chiamata xhr. Ovvero:

const xhr = new XMLHttpRequest();

Abbiamo quindi specificato il tipo di richiesta (GET) e l’endpoint a cui verrà inviata la richiesta (in questo caso, “https://jsonplaceholder.typicode.com/users“)ː

xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

Per inviare la richiesta al server, abbiamo utilizzato il metodo send().

Quando il server invia i dati, è possibile specificare il formato in cui questi vengono restituiti.

Nella maggior parte dei casi viene utilizzato JSON. Quindi ci siamo assicurati che i nostri dati venissero restituiti in JSON aggiungendo questo:

xhr.responseType = "json";

A questo punto, abbiamo inviato con successo una richiesta GET. La prossima cosa da fare è ascoltare ciò che dice il server utilizzando un event listener:

xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

Nel codice qui sopra, stiamo utilizzando l’event listener onload. Utilizzando un’istruzione if, abbiamo controllato lo stato della risposta del server.

Se lo stato del client è 4 (DONE) e se il codice di stato è 200 (richiesta andata a buon fine), i dati verranno registrati nella console. In caso contrario, verrà visualizzato un messaggio che mostra lo stato di errore.

Se avete seguito la procedura fino a questo punto senza alcun errore, dovreste avere un array di oggetti nella vostra consoleː

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Questi sono i dati recuperati dal server.

Come Inviare una Richiesta POST in JavaScript Utilizzando XMLHttpRequest

Con la richiesta POST è possibile inviare nuove informazioni (dati) al server/database sotto forma di oggetto. L’oggetto potrebbe essere un’informazione su un nuovo utente, una nuova voce di un elenco di cose da fare o qualsiasi altra cosa si abbia bisogno di registrare.

L’esempio di codice che vedrete in questa sezione è simile a quello dell’ultima sezione. La differenza principale è che le richieste POST richiedono alcune informazioni che di solito vengono memorizzate in un oggetto prima di essere inviate al server.

Ecco un esempio:

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
const body = JSON.stringify({
  title: "Hello World",
  body: "My POST request",
  userId: 900,
});
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 201) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send(body);

Nel codice qui sopra, le informazioni da inviare al server sono memorizzate in una variabile chiamata body. Essa contiene tre proprietàː title, body e userId.

È importante notare che la variabile body che contiene l’oggetto deve essere convertita in un oggetto JSON prima di essere inviata al server. La conversione avviene con il metodo JSON.stringify().

Per assicurarsi che l’oggetto JSON venga inviato al server, viene passato come parametro al metodo send():

xhr.send(body);

Come Inviare una Richiesta PATCH in JavaScript Utilizzando XMLHttpRequest

La richiesta PATCH viene utilizzata per aggiornare le proprietà specificate di un oggetto. È diversa dal metodo PUT, che aggiorna l’intero oggetto.

Ecco un esempio di richiesta PATCH utilizzando XMLHttpRequest in JavaScript:

const xhr = new XMLHttpRequest();
xhr.open("PATCH", "https://jsonplaceholder.typicode.com/posts/101");
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
const body = JSON.stringify({
  body: "My PATCH request",
});
xhr.onload = () => {
  var data = JSON.parse(xhr.responseText);
  if (xhr.readyState == 4 && xhr.status == "200") {
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send(body);

Il codice qui sopra, se ha successo, registrerà la parte dell’oggetto che è stata aggiornata e inviata al server.

Come Inviare una Richiesta DELETE in JavaScript Usando XMLHttpRequest

Come suggerisce il nome, il metodo DELETE viene utilizzato per cancellare i dati da un server. Questo è lo stesso metodo HTTP di JavaScript.

Nella maggior parte dei casi, dovrete specificare l’ID dei dati che volete cancellare. L’ID è solitamente un parametro dell’endpoint/URL.

Vediamo un esempio di richiesta DELETEː

const xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/3");
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  if (xhr.readyState == 4 && xhr.status == "200") {
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send();

Il codice qui sopra cancellerà un oggetto con un post con ID 3 come specificato nell’endpoint (“https://jsonplaceholder.typicode.com/posts/3“).

2. Come Effettuare una Richiesta HTTP in JavaScript con jQuery

jQuery semplifica il processo di acquisizione dei dati dai server rendendo la sintassi più breve e diretta.

In questa sezione vedremo come effettuare richieste HTTP utilizzando diversi metodi jQuery.

Come Inviare una Richiesta GET in JavaScript con jQuery

jQuery ci fornisce il metodo $.get() per inviare richieste GET ai server. Il metodo accetta due parametri: l’URL del server e una funzione di callback che viene eseguita se la richiesta ha successo.

Ecco un esempio:

$.get("https://jsonplaceholder.typicode.com/users", (data, status) => {
  console.log(data);
});

Come si può vedere nel codice qui sopra, il metodo $.get() ha come parametri l’URL (https://jsonplaceholder.typicode.com/users) e una funzione di callback anonima.

Attraverso la funzione di callback, è possibile accedere ai dati della richiesta e al suo stato. Nel nostro caso, abbiamo registrato i dati nella console.

Ecco quanto è semplice inviare una richiesta GET con jQuery.

Come Inviare una Richiesta POST in JavaScript con jQuery

Per inviare una richiesta POST con jQuery, usiamo il metodo $.post(). Il metodo richiede tre parametri: l’URL, i dati da inviare al server e una funzione di callback.

const body = JSON.stringify({
  title: "Hello World",
  body: "My POST request",
  userId: 900,
});
$.post("https://jsonplaceholder.typicode.com/users", body, (data, status) => {
  console.log(data);
});

Nel codice precedente, abbiamo creato un oggetto da inviare al server e lo abbiamo memorizzato in una variabile chiamata body. Questa variabile è stata passata come secondo parametro nel metodo $.post().

Utilizzando la funzione callback, abbiamo registrato il risultato della richiesta nella console.

3. Come Effettuare Richieste Asincrone in jQuery Utilizzando il Metodo $.ajax()

Prima di procedere all’invio di richieste PATCH e DELETE, parliamo del metodo $.ajax().

Il metodo $.ajax() di jQuery è utilizzato per effettuare richieste asincrone.

La sintassi è diversa dalle altre.

Ecco come effettuare una richiesta GET utilizzando il metodo $.ajax():

$.ajax({
  url: "https://jsonplaceholder.typicode.com/users",
  type: "GET",
  success: function (result) {
    console.log(result);
  },
});

Il metodo $.ajax() ha diversi parametri che possiamo utilizzare.

Nel codice qui sopra, il parametro url specifica l’URL del server, il parametro type specifica il tipo di richiesta e il parametro success chiama una funzione di callback se la richiesta ha successo.

Nella prossima sezione vedremo come inviare richieste PATCH e DELETE utilizzando il metodo $.ajax() di jQuery.

Come Inviare una Richiesta PATCH in JavaScript Utilizzando il Metodo $.ajax() di jQuery

In questa sezione vedremo come inviare richieste PATCH utilizzando il metodo $.ajax() di jQuery.

Ecco il codice:

const body = JSON.stringify({
  body: "My PATCH request",
});
$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/101",
  type: "PATCH",
  data: body,
  success: function (result) {
    console.log(result);
  },
});

Nel codice qui sopra, la proprietà da aggiornare viene memorizzata nella variabile body. Questa viene poi utilizzata come valore per il parametro data.

Se la richiesta va a buon fine, verrà eseguita la funzione del parametro success.

Come Inviare una Richiesta DELETE in JavaScript con il Metodo $.ajax() di jQuery

L’invio di una richiesta DELETE utilizzando il metodo $.ajax() di jQuery richiede solo poche righe di codice.

Ecco un esempio:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/3",
  type: "DELETE",
  success: function (result) {
    console.log(result)
  },
});

Come si può vedere qui sopra, è bastato specificare l’URL con l’ID dell’oggetto da cancellare, il tipo di richiesta e una funzione che viene eseguita se la richiesta va a buon fine.

Come Usare il Metodo $.getJSON in jQuery

Il metodo $.getJSON offre un modo più breve per inviare richieste GET.

Per effettuare una richiesta con successo, dovete solo specificare l’URL e la funzione di callback. Ecco un esempio:

$.getJSON("https://jsonplaceholder.typicode.com/users", function (result) {
  console.log(result)
});

Nel codice qui sopra, abbiamo passato l’URL al server e la funzione che viene eseguita dopo che la richiesta è andata a buon fine come parametri del metodo $.getJSON.

Il codice precedente registrerà nella console un array di oggetti contenenti informazioni sull’utente.

4. Come Effettuare una Richiesta HTTP in JavaScript Utilizzando l’API Fetch

L’API fetch è uno dei metodi più diffusi per interagire con i server utilizzando JavaScript. È un’API nativa di JavaScript che supporta le promise durante le richieste.

La sintassi per utilizzare l’API fetch è molto semplice da capire, come vedrete nelle sezioni seguenti.

Come Inviare una Richiesta GET in JavaScript Utilizzando l’API Fetch

L’invio di una richiesta GET tramite l’API fetch richiede solo l’URL. Questo restituisce una promise alla quale è possibile accedere utilizzando il metodo then() o le parole chiave async e await.

Vediamo un esempio:

fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => console.log(json));

Nel codice qui sopra, abbiamo passato l’URL al metodo fetch; questo restituisce una promise. Abbiamo poi avuto accesso alla risposta del server utilizzando il metodo then(). La risposta è stata convertita in un oggetto JSON con il metodo response.json().

Dopo aver ottenuto la risposta, abbiamo utilizzato un altro metodo then() per registrare i dati nella console.

Come Inviare una Richiesta POST in JavaScript Utilizzando l’API Fetch

Il metodo fetch ha un secondo parametro che ci permette di specificare il corpo (i dati da inviare) e il tipo di richiesta da inviare. Questo secondo parametro ci permette di inviare richieste POST e PATCH.

Date un’occhiata a questo esempio di codice:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    title: "Hello World",
    body: "My POST request",
    userId: 900,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));

Nel codice qui sopra, abbiamo aggiunto delle opzioni di richiesta nel secondo parametro del metodo fetch. method è stato usato per specificare il tipo di richiesta, body ha specificato i dati da inviare al server e headers è stato usato per specificare che avremmo inviato dati JSON al server.

Come abbiamo fatto in precedenza per l’invio di una richiesta GET, la promise/risposta restituita era accessibile con il metodo then().

Come Inviare una Richiesta PUT in JavaScript Utilizzando l’API Fetch

Nelle altre sezioni in cui abbiamo inviato una richiesta per aggiornare un oggetto nel server, abbiamo utilizzato PATCH. In questa sezione useremo PUT, che permette di aggiornare l’intero oggetto.

Ecco un esempio che utilizza l’API fetch:

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify({
    id: 1,
    title: "My PUT request",
    body: "Updating the entire object",
    userId: 1,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));

Poiché stiamo inviando una richiesta PUT, dobbiamo fornire i dati da aggiornare, che vengono passati come valore all’opzione di richiesta body.

Abbiamo anche specificato l’ID dell’oggetto da aggiornare come ultimo parametro dell’URL. Se la richiesta viene eseguita correttamente, dovreste vedere l’oggetto aggiornato registrato nella console.

Come Inviare una Richiesta DELETE in JavaScript Utilizzando l’API Fetch

L’invio di una richiesta DELETE è piuttosto semplice: tutto ciò che dovete fare è specificare l’ID dell’oggetto da eliminare. È possibile utilizzare il metodo then() per ricevere la risposta dal server, come abbiamo fatto con le altre richieste.

Ecco un rapido esempio:

fetch("https://jsonplaceholder.typicode.com/posts/3", {
  method: "DELETE",
});

Il codice qui sopra cancellerà un oggetto con un ID pari a 3.

5. Come Effettuare una Richiesta HTTP in JavaScript con Axios

Axios è una libreria di terze parti basata su “promises” per l’invio di richieste HTTP. Come la maggior parte dei client HTTP moderni, semplifica il processo di invio delle richieste a un server.

In questa sezione scoprirete come inviare richieste GET, POST, PUT e DELETE a un server utilizzando Axios.

È importante notare che Axios non è integrato in JavaScript: dovrete installarlo separatamente per poterne utilizzare le funzionalità. Per installare Axios nel vostro progetto, eseguite il comando seguente nel terminale del progetto:

npm install axios

Come Inviare una Richiesta GET in JavaScript Usando Axios

Per inviare una richiesta GET con Axios, dovete solo passare l’URL al metodo get(), che restituisce una promise. La risposta restituita dalla promise può essere consultata con il metodo then().

Vediamo un esempio:

axios.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));

Il codice qui sopra riporta un array di oggetti contenenti i dati restituiti dal server. Noterete che non abbiamo dovuto cambiare gli oggetti restituiti in oggetti JSON: Axios gestisce questo aspetto in background e potrete accedere ai dati usando response.data.

Per individuare eventuali errori, abbiamo utilizzato il metodo catch().

Come Inviare una Richiesta POST in JavaScript con Axios

La richiesta POST di Axios richiede due parametri: l’URL e i dati da inviare al server. È possibile memorizzare i dati in una variabile o passarli direttamente come parametro.

Ecco come fare:

axios.post("https://jsonplaceholder.typicode.com/posts", {
  title: "POST request with Axios",
  body: "POST request",
  userId: 10,
})
.then(function (response) {
  console.log(response.data);
})
.then((error) => console.log(error))

Nell’esempio precedente, stiamo inviando dei dati al server. I dati vengono passati come secondo parametro del metodo post().

Se la richiesta viene inviata con successo, vedrete il risultato registrato nella console.

Come Inviare una Richiesta PUT in JavaScript con Axios

L’invio di una richiesta PUT con Axios è simile all’invio di una richiesta POST. Per inviare una richiesta PUT, dovrete specificare l’URL (compreso l’ID dell’oggetto da aggiornare) e i dati da aggiornare come secondo parametro del metodo put().

L’esempio che segue aggiorna un oggetto con ID 10:

axios.put("https://jsonplaceholder.typicode.com/posts/10", {
  title: "PUT request with Axios",
  body: "PUT request",
  userId: 10,
})
.then(function (response) {
  console.log(response.data);
})
.then((error) => console.log(error))

Come inviare una richiesta DELETE in JavaScript con Axios

Per inviare una richiesta di DELETE, dovete specificare l’ID dell’oggetto da eliminare nell’URL.

Come al solito, dovrete specificare l’URL insieme all’ID dell’oggetto da cancellare.

Ecco un esempio:

axios.delete("https://jsonplaceholder.typicode.com/posts/10")
.then(function (response) {
  console.log(response);
})
.then((error) => console.log(error))

6. Come Fare una Richiesta HTTP in JavaScript con SuperAgent

SuperAgent è una delle più antiche librerie create per effettuare richieste HTTP in JavaScript. Proprio come Axios, supporta le promise e dispone di metodi predefiniti per inviare varie richieste HTTP ai server.

Per utilizzare SuperAgent, installatela utilizzando il comando seguente:

npm install superagent

Inizieremo con un esempio di richiesta GET.

Come Inviare una Richiesta GET in JavaScript usando SuperAgent

SuperAgent ci fornisce un metodo get() per inviare richieste GET. L’URL viene passato come parametro del metodo.

La promise restituita dalla richiesta può essere valutata con il metodo end(), come si vede in questo esempio:

superagent
.get("https://jsonplaceholder.typicode.com/posts")
.end((error, response) => {
  console.log(response.body);
});

Come Inviare una Richiesta POST in JavaScript con SuperAgent

Quando si invia una richiesta POST utilizzando SuperAgent, si passano i dati da inviare al server come parametro al metodo send() di SuperAgent:

superagent
.post("https://jsonplaceholder.typicode.com/posts")
.send({
  title: "POST request with SuperAgent",
  body: "POST request",
  userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
  console.log(res.body);
});

Nel codice qui sopra, l’URL è stato passato come parametro del metodo post(). I dati da inviare sono stati passati al metodo send(). Utilizzando il metodo end(), abbiamo ottenuto il risultato della risposta del server.

Come Inviare una Richiesta PUT in JavaScript con SuperAgent

È possibile inviare una richiesta PUT in SuperAgent utilizzando il metodo put(). Proprio come nell’esempio dell’ultima sezione, i dati da aggiornare devono essere passati come parametro al metodo send().

Ecco un esempio:

superagent
.put("https://jsonplaceholder.typicode.com/posts/10")
.send({
  title: "PUT request with SuperAgent",
  body: "PUT request",
  userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
  console.log(res.body);
});

Come Inviare una Richiesta di Cancellazione in JavaScript con SuperAgent

Per inviare una richiesta di cancellazione, è semplicemente necessario specificare l’ID dell’oggetto da cancellare nell’URL. Questo verrà utilizzato come parametro nel metodo delete().

superagent
.delete("https://jsonplaceholder.typicode.com/posts/10")
.end((err, res) => {
  console.log(res.body);
});

7. Come Effettuare una Richiesta HTTP in JavaScript con Qwest

Qwest è una libreria AJAX usata per interagire con i server. Attualmente è archiviata su GitHub – il creatore ha interrotto la manutenzione della libreria con l’avvento delle API fetch e di Axios.

Qwest supporta anche l’uso delle promise.

Nelle seguenti sottosezioni vedremo come inviare richieste GET, POST, PUT e DELETE utilizzando Qwest.

Come Inviare una Richiesta GET in JavaScript con Qwest

Qwest dispone di un metodo get() che può essere utilizzato per inviare richieste GET. Ecco come utilizzarlo:

qwest.get("https://jsonplaceholder.typicode.com/posts")

.then((xhr, response) => console.log(response));

Come Inviare una Richiesta POST in JavaScript con Qwest

Come secondo parametro, al metodo post() vengono passati i dati da inviare al server. Il primo parametro è l’URL.

Ecco un esempio:

qwest.post("https://jsonplaceholder.typicode.com/posts", {
  title: 'POST request with Qwest',
  body: 'POST request',
  userId: 30
})
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Come Inviare una Richiesta PUT in JavaScript utilizzando Qwest

La sintassi è la stessa della sezione precedente. Tutto ciò che dovrete cambiare è il tipo di richiesta e poi specificare l’ID dell’oggetto da aggiornare e i dati con cui si vuole aggiornare l’oggetto.

Date un’occhiata a questo esempio:

qwest.put("https://jsonplaceholder.typicode.com/posts/30", {
  title: 'PUT request with Qwest',
  body: 'PUT request',
  userId: 30
})
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

È bene notare che l’ID viene specificato nell’URL e non nell’oggetto inviato al server.

Come Inviare una Richiesta DELETE in JavaScript con Qwest

Come al solito, per cancellare un oggetto da un server, è necessario specificare l’URL e l’ID dell’oggetto da cancellare. Sia l’URL che l’ID dell’oggetto da cancellare saranno passati come parametro al metodo delete() di Qwest.

Ecco un esempio:

qwest.delete("https://jsonplaceholder.typicode.com/posts/30")
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Una volta che la richiesta è stata eseguita con successo, verrà eliminato un oggetto con l’ID 30.

Riepilogo

La nostra capacità di interagire con i server utilizzando JavaScript si è evoluta nel corso degli anni. Con una comunità di sviluppatori JavaScript sempre più attiva, vengono apportate continue modifiche e introdotti nuovi strumenti per rendere il processo più semplice.

I metodi discussi in questo tutorial non si applicano solo ai server remoti, ma possono essere utilizzati anche per interagire con i propri server durante la creazione di applicazioni web full stack. Funzionano anche con numerose librerie e framework JavaScript.

In questo tutorial vi abbiamo insegnato come effettuare richieste HTTP in JavaScript. Abbiamo fornito vari esempi e spiegazioni che mostrano come inviare richieste GET, POST, PUT/PATCH e DELETE utilizzando metodi JavaScript integrati e librerie di terze parti.

Costruire e distribuire un sito web può essere impegnativo, indipendentemente dalle vostre competenze. Ma Kinsta rende tutto più semplice e rapido con DevKinsta. Utilizzato da oltre 25.000 sviluppatori, web designer e freelance, DevKinsta offre un ambiente locale per lo sviluppo di temi, plugin e altro per WordPress. Date un’occhiata!