Gestione degli errori e dei risultati AJAX

Quando effettua una richiesta AJAX, si tratta di un'operazione asincrona. Ciò significa che il codice non attende la risposta del server, ma continua a eseguire altre attività.

Per gestire la risposta del server (o la sua assenza), jQuery mette a disposizione metodi speciali chiamati callback. Queste funzioni vengono eseguite solo quando si verificano determinati eventi, ad esempio un esito positivo o negativo.

La callback .done() è la scelta ideale per gestire le richieste AJAX completate con successo. Viene eseguita quando il server risponde con un codice di stato che indica un esito positivo (in genere 200-299).

• Riceve i dati restituiti dal server.
• È il posto ideale per aggiornare l'interfaccia utente con informazioni aggiornate.

Recuperiamo alcuni dati e visualizziamoli quando la richiesta ha esito positivo. Noti come .done() sia concatenato alla chiamata $.ajax().

Ma cosa succede se il server non riesce a soddisfare la richiesta? È qui che entra in gioco la callback .fail(). Viene eseguita quando la richiesta AJAX rileva un errore, ad esempio un 404 (Not Found) o un 500 (Server Error).

• Consente di informare l'utente o registrare i problemi.
• Riceve i dettagli dell'errore.

Proviamo a recuperare dati da un URL inesistente. La callback .fail() intercetterà l'errore e ne registrerà i dettagli.

La callback .fail() fornisce tre parametri utili per capire cosa è andato storto:

• jqXHR: l'oggetto jQuery XMLHttpRequest, che fornisce dettagli di basso livello.
• textStatus: una stringa che descrive il tipo di errore (ad esempio, "timeout", "error", "abort").
• errorThrown: il testo dello stato HTTP (ad esempio, "Not Found" per un 404).

Utilizzi questi parametri per fornire agli utenti indicazioni specifiche.

A volte è necessario eseguire un'azione indipendentemente dal fatto che la richiesta AJAX abbia avuto esito positivo o negativo. Questo è il compito della callback .always().

• Viene sempre eseguita dopo uno dei due metodi, .done() o .fail().
• È ideale per attività di pulizia, come nascondere un indicatore di caricamento o riattivare un pulsante.

Aggiungiamo .always() all'esempio precedente. Simuleremo uno stato di caricamento e ci assicureremo che venga rimosso sia in caso di successo sia in caso di errore della richiesta.

I metodi AJAX di jQuery restituiscono un oggetto simile a una Promise, che consente di concatenare direttamente i metodi .done(), .fail() e .always().

Questa concatenazione rende il codice più pulito e leggibile, separando chiaramente i blocchi di logica per il successo, gli errori e le operazioni finali.

Consideri la seguente richiesta AJAX di jQuery:

$.ajax({
  url: "/api/data",
  method: "GET"
})
.done(function() {
  console.log("A");
})
.fail(function() {
  console.log("B");
})
.always(function() {
  console.log("C");
});

Se il server risponde con un errore 404 Not Found, cosa verrà stampato nella console?

Ha acquisito le callback essenziali per una gestione affidabile di AJAX:

• .done(): per le risposte positive.
• .fail(): per gestire gli errori.
• .always(): per le azioni da eseguire in ogni caso.

Utilizzandole, le Sue applicazioni possono gestire con eleganza le interazioni di rete, offrendo un'esperienza migliore agli utenti anche quando le cose non vanno come previsto.