Gestion des erreurs et des réussites AJAX
Mettez en œuvre une gestion robuste des erreurs avec les rappels .fail() et .always(), et traitez la récupération réussie des données avec .done() pour des applications résilientes.
Gestion des erreurs et des réussites AJAX est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.
Gestion des résultats asynchrones
Lorsque vous effectuez une requête AJAX, il s’agit d’une opération asynchrone. Cela signifie que votre code n’attend pas la réponse du serveur : il continue d’exécuter d’autres tâches.
Pour gérer la réponse du serveur, ou son absence, jQuery fournit des méthodes spéciales appelées fonctions de rappel. Ces fonctions s’exécutent uniquement lorsque certains événements se produisent, comme une réussite ou un échec.
Quand tout se passe bien
La fonction de rappel .done() est celle à privilégier pour gérer les requêtes AJAX réussies. Elle s’exécute lorsque le serveur répond avec un code d’état indiquant une réussite, généralement compris entre 200 et 299.
- Elle reçoit les données renvoyées par le serveur.
- C’est l’endroit idéal pour mettre à jour votre interface utilisateur avec des informations récentes.
Afficher les données récupérées
Récupérons des données et affichons-les lorsque la requête réussit. Remarquez que .done() est chaînée à l’appel $.ajax().
$(document).ready(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
method: "GET"
})
.done(function(data) {
console.log("Success! Data received:");
console.log(data.title); // Access a property
$('body').append('<p>Post Title: ' + data.title + '</p>');
});
});Quand les choses tournent mal
Mais que se passe-t-il si le serveur ne peut pas traiter votre requête ? C’est là qu’intervient la fonction de rappel .fail(). Elle s’exécute lorsque la requête AJAX rencontre une erreur, comme une erreur 404 (Ressource introuvable) ou 500 (Erreur du serveur).
- Elle vous aide à informer l’utilisateur ou à consigner les problèmes.
- Elle reçoit des détails sur l’erreur.
Réagir aux échecs
Essayons de récupérer des données depuis une URL inexistante. La fonction de rappel .fail() interceptera l’erreur et en consignera les détails.
$(document).ready(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/nonexistent", // This URL will fail
method: "GET"
})
.done(function(data) {
console.log("This won't run on error.");
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log("Error! Status: " + textStatus);
console.log("HTTP Error: " + errorThrown);
$('body').append('<p>Error fetching data!</p>');
$('body').append('<p>Status: ' + textStatus + '</p>');
});
});Comprendre les paramètres d’erreur
La fonction de rappel .fail() fournit trois paramètres utiles pour vous aider à comprendre ce qui s’est mal passé :
jqXHR: l’objet jQuery XMLHttpRequest, qui fournit des détails de bas niveau.textStatus: une chaîne décrivant le type d’erreur, par exemple « timeout », « error » ou « abort ».errorThrown: le texte associé à l’état HTTP, par exemple « Not Found » pour une erreur 404.
Utilisez-les pour fournir à vos utilisateurs des informations précises.
Toujours s’exécuter, quoi qu’il arrive
Vous devez parfois effectuer une action, que la requête AJAX réussisse ou échoue. C’est le rôle de la fonction de rappel .always().
- Elle s’exécute toujours après soit
.done(), soit.fail(). - Elle est idéale pour les tâches de nettoyage, comme masquer un indicateur de chargement ou réactiver un bouton.
Effectuer le nettoyage
Ajoutons .always() à notre exemple précédent. Nous simulerons un état de chargement et veillerons à le supprimer, que la requête réussisse ou échoue.
$(document).ready(function() {
$('body').append('<p id="status">Loading data...</p>'); // Simulate loading
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1", // Try changing to 'nonexistent' to see fail+always
method: "GET"
})
.done(function(data) {
console.log("Success! Data: " + data.title);
$('#status').text('Data loaded successfully!');
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log("Failed! " + textStatus);
$('#status').text('Failed to load data!');
})
.always(function() {
console.log("Request finished (success or failure).");
// This could be where you hide a spinner or re-enable a button
$('#status').append(' (Finished)');
});
});Organiser vos fonctions de rappel
Les méthodes AJAX de jQuery renvoient un objet semblable à une promesse, ce qui vous permet d’enchaîner directement les méthodes .done(), .fail() et .always().
Grâce à cet enchaînement, votre code est plus clair et plus facile à lire : les blocs de logique liés à la réussite, aux erreurs et au traitement final sont nettement séparés.
Testez vos connaissances
Considérez la requête AJAX jQuery suivante :
$.ajax({
url: "/api/data",
method: "GET"
})
.done(function() {
console.log("A");
})
.fail(function() {
console.log("B");
})
.always(function() {
console.log("C");
});
Si le serveur répond avec une erreur 404 Not Found, qu’est-ce qui sera affiché dans la console ?
Récapitulatif de la gestion AJAX
Vous maîtrisez désormais les fonctions de rappel essentielles pour gérer efficacement les requêtes AJAX :
.done(): pour les réponses réussies..fail(): pour gérer les erreurs..always(): pour les actions qui doivent s’exécuter quoi qu’il arrive.
En les utilisant, vos applications peuvent gérer les échanges réseau avec élégance et offrir une meilleure expérience aux utilisateurs, même lorsque les choses ne se déroulent pas comme prévu !
Apprends JavaScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 22
- Leçons
- 48
Questions Fréquemment Posées
La leçon « Gestion des erreurs et des réussites AJAX » est-elle gratuite ?
Oui — le texte complet de « Gestion des erreurs et des réussites AJAX » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Gestion des erreurs et des réussites AJAX » ?
Mettez en œuvre une gestion robuste des erreurs avec les rappels .fail() et .always(), et traitez la récupération réussie des données avec .done() pour des applications résilientes. Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.
Combien de temps prend la leçon « Gestion des erreurs et des réussites AJAX » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configuration efficace des requêtes AJAX
- Gestion des erreurs et des réussites AJAX
- AJAX interdomaines (CORS/JSONP)