web-dev-qa-db-fra.com

Comment gérez-vous les erreurs de AJAX appels?

Disons que j'ai l'appel jQuery AJAX suivant:

$.ajax({
   type: "POST",
   url: "MyUrl",
   data: "val1=test",
   success: function(result){
        // Do stuff
   }
 });

Maintenant, lorsque cet appel AJAX est passé, je souhaite que le code côté serveur s'exécute au moyen de quelques contrôles de gestion des erreurs (par exemple, l'utilisateur est-il toujours connecté, at-il l'autorisation d'utiliser cet appel, les données sont-elles stockées?) valide, etc). Si une erreur est détectée, comment puis-je effacer ce message d'erreur du côté client?

Ma pensée initiale serait de renvoyer un objet JSON avec deux champs: error et errorMessage. Ces champs seraient alors vérifiés dans l'appel jQuery AJAX:

$.ajax({
   type: "POST",
   url: "MyUrl",
   data: "val1=test",
   success: function(result){
       if (result.error == "true") 
       {
           alert("An error occurred: " & result.errorMessage);
       }
       else 
       {
           // Do stuff
       }
   }
 });

Cela me semble un peu maladroit, mais cela fonctionne. Y a-t-il une meilleure alternative?

jqueryajaxvalidation
24
Kevin Pang

Personnellement, j'ai un code similaire au code suivant dans ma bibliothèque.

$.ajaxSetup({
    error: function(xhr){
        alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
    }
});

Documents jQuery Ajax/jQuery.ajaxSetup

Le meilleur moyen de masquer cette erreur du côté serveur (à l'aide de php) au côté client est d'envoyer un en-tête via la requête Ajax quelque part dans la colonne 400 (qui est toujours associé à des erreurs). Une fois que la demande Ajax le reçoit, cela déclenchera votre fonction d'erreur. Cela signifie également que vous ne devez pas définir d'erreur: appelez à chaque appel $ .ajax.

header('HTTP/1.0 419 Custom Error');

Citation de informations d'en-tête w3.org

Erreur 4xx, 5xx Les codes 4xx sont destinés aux cas dans lesquels le client semble avoir commis une erreur, et les codes 5xx aux cas dans lesquels le serveur sait que le serveur a commis une erreur. Il est impossible de distinguer ces cas en général, la différence n’est donc qu’informationnel. La section body peut contenir un document décrivant l’erreur sous une forme lisible par l’homme. Le document est au format MIME et ne peut être que text/plain, text/html ou un pour les formats spécifiés comme acceptables dans la demande.

24
Asciant
$.ajax({
   type: "POST",
   url: "MyUrl",
   data: "val1=test",
   success: function(result){
        // Do stuff
   },
   error: function(request,status,errorThrown) {
        // There's been an error, do something with it!
        // Only use status and errorThrown.
        // Chances are request will not have anything in it.
   }
 });
5
Salty

La fonction jQuery ajax n'accepte-t-elle pas un paramètre supplémentaire à la fin, un rappel pour les appels ayant échoué? Si c'est le cas, ajoutez simplement fail:function(...){..} après le rappel de réussite.

3
rodbv

Renvoyer un code d'erreur côté serveur à l'aide de l'erreur HTTP, ce qui correspond le mieux à l'erreur. Ensuite, utilisez le rappel d'erreur. Cela vous permettra également d'afficher les erreurs données par votre serveur Web.

0
Adam Peck

Il est assez tard pour répondre à cette question mais je pense que cela profitera à quelqu'un utilisant es6 et jquery 2.2.

Je suis généralement ceci (approche différée) dans mon code 

sendAjaxRequest(URL, dataToSend) {
    return $.ajax({
        type        : 'POST',
        url         : URL,
        data        : JSON.stringify(dataToSend),
        dataType    : 'json'
    }).fail((responseData) => {
        if (responseData.responseCode) {
            console.error(responseData.responseCode);
        }
    });
},

J'ai joint une méthode différée fail qui sera appelée en cas d'erreur. C'est une construction alternative à l'option de rappel d'erreur, la méthode .fail () remplace la méthode obsolète .error () dans la dernière version de jquery.

Suivant du lieu d'appel sendAjaxRequest J'utilise then jquery promise callback 

sendAjaxRequest(URL, dataToSend)
.then(
     (success) => {
     },
     (error) => {
     }
);

Il appelle la fonction succès ou erreur en fonction de la réponse reçue du serveur. 

0
WitVault