Gérer l'échec de $.ajax dans jQuery

Le message d’aujourd’hui traitera de la gestion des demandes d’échec dans AJAX dans jQuery.

Gérer l’échec de $.ajax dans jQuery

La requête de publication AJAX de jQuery exécute une requête HTTP asynchrone (AJAX).

Syntaxe:

jQuery.ajax([settings]).fail((jqXHR, textStatus) => {});
jQuery.ajax(url[, settings]).fail((jqXHR, textStatus) => {});

Où:

1. URL est la chaîne contenant l’URL à laquelle la demande sera envoyée.
2. settings sont les objets paire clé/valeur qui configurent la requête AJAX. Tous les paramètres sont facultatifs ; une valeur par défaut peut être définie pour chaque option avec $.ajaxSetup().

L’approche .fail() remplace l’approche obsolète .error(). Il s’agit d’une construction alternative à l’option de rappel d’erreur.

Si la requête échoue, l’option de rappel erreur est appelée dans la configuration AJAX. Il reçoit le jqXHR, une chaîne indiquant le type d’erreur, et un objet d’exception, le cas échéant.

Certaines erreurs intégrées renvoient une chaîne en tant qu’objet d’exception, telles que : abort, timeout, no transport.

$.ajax() renvoie l’objet jQuery XMLHttpRequest (jqXHR), qui est un sur-ensemble de l’objet natif XMLHttpRequest du navigateur.

Comprenons-le avec l’exemple suivant.

Remarque : Les codes suivants ne peuvent pas être exécutés tels quels et n’ont aucune sortie. Il doit être ajouté au code existant pour voir les sorties.

Code HTML:

<form id="myForm">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" value="Smith" />
  <input type="submit" value="Send" />
</form>

Code Javascript :

$('#myForm').submit(function(event) {
  event.preventDefault();
  $.ajax({
     method: 'POST',
     url: '/open/hello-world',
     data: {name: 'Smith', location: 'United State'},
     error: function(jqXHR, thrownError) {
       alert(jqXHR.status);
       alert(thrownError);
     }
   })
      .done(function(msg) {
        alert('Data Saved: ' + msg);
      })
      .fail((jqXHR, errorMsg) => {alert(jqXHR.responseText, errorMsg)});
})

Dans l’exemple ci-dessus, une fois que l’utilisateur a soumis le formulaire, un appel AJAX est envoyé au serveur avec l’URL et les paramètres spécifiés. Lorsque le serveur revient avec un message de réussite, vous pouvez imprimer le message sur la console ou avertir l’utilisateur avec le message approprié.

Si le serveur revient avec un message d’erreur, vous pouvez intercepter l’erreur en utilisant le gestionnaire d’erreurs ou .fail() et notifier l’utilisateur avec le message d’erreur approprié.