Comment puis-je intercepter l'erreur jQuery $ .getJSON (ou $ .ajax avec le type de données défini sur 'jsonp') lors de l'utilisation de JSONP?

StackOverflow https://stackoverflow.com/questions/309953

  •  08-07-2019
  •  | 
  •  

Question

Est-il possible de détecter une erreur lors de l'utilisation de JSONP avec jQuery? J'ai essayé les méthodes $ .getJSON et $ .ajax, mais aucune ne détectera l'erreur 404 que je teste. Voici ce que j'ai essayé (sachez que tout fonctionne avec succès, mais je veux gérer le cas en cas d'échec): 

jQuery.ajax({
    type: "GET",
    url: handlerURL,
    dataType: "jsonp",
    success: function(results){
        alert("Success!");
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){
        alert("Error");
    }
});

Et aussi: 

jQuery.getJSON(handlerURL + "&callback=?", 
    function(jsonResult){
        alert("Success!");
    });

J'ai également essayé d'ajouter $ .ajaxError mais cela ne fonctionnait pas non plus: 

jQuery(document).ajaxError(function(event, request, settings){
   alert("Error");
});

Merci d'avance pour vos réponses!

Était-ce utile?

La solution

Il semble que les requêtes JSONP qui ne renvoient pas un résultat positif ne déclenchent aucun événement, que ce soit un succès ou un échec, et pour le meilleur ou pour le pire, cela est apparemment intentionnel.

Après avoir recherché leur traqueur de bogues, il existe un correctif qui peut être une solution possible en utilisant un rappel de délai d'attente. Consultez le rapport de bogue n ° 3442 . Si vous ne pouvez pas capturer l'erreur, vous pouvez au moins expirer après une attente d'un délai raisonnable pour réussir.

Autres conseils

Voici ma réponse détaillée à une question similaire.

Voici le code: 

jQuery.getJSON(handlerURL + "&callback=?", 
    function(jsonResult){
        alert("Success!");
    })
.done(function() { alert('getJSON request succeeded!'); })
.fail(function(jqXHR, textStatus, errorThrown) { alert('getJSON request failed! ' + textStatus); })
.always(function() { alert('getJSON request ended!'); });

Détection des problèmes JSONP

Si vous ne souhaitez pas télécharger une dépendance, vous pouvez détecter vous-même l'état d'erreur. C'est facile.

Vous ne pourrez détecter les erreurs JSONP qu'en utilisant une sorte de délai d'attente. S'il n'y a pas de réponse valide dans un certain délai, supposez une erreur. L’erreur pourrait être fondamentalement n'importe quoi, cependant.

Voici un moyen simple de vérifier les erreurs. Utilisez simplement un success drapeau: 

var success = false;

$.getJSON(url, function(json) {
    success = true;
    // ... whatever else your callback needs to do ...
});

// Set a 5-second (or however long you want) timeout to check for errors
setTimeout(function() {
    if (!success)
    {
        // Handle error accordingly
        alert("Houston, we have a problem.");
    }
}, 5000);

Comme mentionné dans les commentaires, vous pouvez également utiliser clearTimeout à la place: 

var errorTimeout = setTimeout(function() {
    if (!success)
    {
        // Handle error accordingly
        alert("Houston, we have a problem.");
    }
}, 5000);

$.getJSON(url, function(json) {
    clearTimeout(errorTimeout);
    // ... whatever else your callback needs to do ...
});

Pourquoi? Lire la suite ...

Voici comment JSONP fonctionne:

JSONP n'utilise pas XMLHttpRequest comme les requêtes AJAX classiques. Au lieu de cela, il insère une balise <script> dans la page, où & "; Src &"; attribut est l'URL de la demande. Le contenu de la réponse est encapsulé dans une fonction Javascript qui est ensuite exécutée une fois téléchargée.

Par exemple.

Requête JSONP: https://api.site.com/endpoint?this=that&callback=myFunc

Javascript injectera cette balise de script dans le DOM: 

<script src="https://api.site.com/endpoint?this=that&callback=myFunc"></script>

Que se passe-t-il quand une balise callback est ajoutée au DOM? Évidemment, il est exécuté.

Supposons donc que la réponse à cette requête donne un résultat JSON tel que: 

{"answer":42}

Pour le navigateur, c'est la même chose que la source d'un script, donc il est exécuté. Mais que se passe-t-il lorsque vous exécutez ceci: 

<script>{"answer":42}</script>

Eh bien, rien. C'est juste un objet. Il ne sera pas stocké, enregistré et rien ne se passe.

C'est pourquoi les requêtes JSONP incorporent leurs résultats dans une fonction. Le serveur, qui doit prendre en charge la sérialisation JSONP, voit le myFunc paramètre que vous avez spécifié et le renvoie à la place: 

myFunc({"answer":42})

Ensuite, ceci est exécuté à la place: 

<script>myFunc({"answer":42})</script>

... ce qui est beaucoup plus utile. Dans ce cas, votre code contient une fonction globale appelée <=>:

. 
myFunc(data)
{
    alert("The answer to life, the universe, and everything is: " + data.answer);
}

C'est ça. C'est la & "Magie &"; de JSONP. Ensuite, construire une vérification de délai d'attente est très simple, comme illustré ci-dessus. Faites la demande et immédiatement après, commencez un timeout. Au bout de X secondes, si votre drapeau n'a toujours pas été défini, la demande a expiré.

Je sais que cette question est un peu vieille mais je n’ai pas vu de réponse qui donne une solution simple au problème, j’ai donc pensé partager ma solution "simple". 

$.getJSON("example.json", function() {
      console.log( "success" );
}).fail(function() { 
      console.log( "error" ); 
});

Nous pouvons simplement utiliser le .fail() rappel pour vérifier si une erreur s'est produite.

J'espère que cela vous aidera:)

Si vous collaborez avec le fournisseur, vous pouvez envoyer un autre paramètre de chaîne de requête, qui sera la fonction à rappeler en cas d'erreur.

? callback =? & amp; error =?

Ceci s’appelle JSONPE mais ce n’est pas du tout un standard de facto.

Le fournisseur transmet ensuite les informations à la fonction d'erreur pour vous aider à diagnostiquer.

N'aide pas les erreurs de comm en revanche - jQuery devrait être mis à jour pour rappeler également la fonction d'erreur lors de l'expiration du délai, comme dans la réponse d'Adam Bellaire.

On dirait que cela fonctionne maintenant: 

jQuery(document).ajaxError(function(event, request, settings){
   alert("Error");
});

Je l'utilise pour intercepter une erreur JSON 

try {
   $.getJSON(ajaxURL,callback).ajaxError();
} catch(err) {
   alert("wow");
   alert("Error : "+ err);
}

Modifier: vous pouvez également obtenir le message d'erreur. Cela vous permettra de savoir quelle est l'erreur exactement. Essayez de suivre la syntaxe dans le bloc catch 

alert("Error : " + err);

Est-ce que cela fonctionne? 

.complete(function(response, status) {
    if (response.status == "404")
        alert("404 Error");
    else{
        //Do something
    }   
    if(status == "error")
        alert("Error");
    else{
        //Do something
    }
});

Je ne sais pas à chaque fois que l'état passe en " erreur " mode. Mais je l'ai testé avec 404 et il a répondu

vous pouvez gérer explicitement n'importe quel numéro d'erreur en ajoutant cet attribut à la requête ajax: 

statusCode: {
        404: function() {
          alert("page not found");
        }
    }

alors, votre code devrait être comme ça: 

jQuery.ajax({
type: "GET",
statusCode: {
        404: function() {
          alert("page not found");
        }
},
url: handlerURL,
dataType: "jsonp",
success: function(results){
    alert("Success!");
},
error: function(XMLHttpRequest, textStatus, errorThrown){
    alert("Error");
}
});

espérons que cela vous aide:)

J'ai également posté cette réponse dans pile débordement - Traitement des erreurs dans les appels getJSON

Je sais que cela fait longtemps que personne n’a répondu et l’affiche a probablement déjà reçu sa réponse d’ici ou d’autre part. Cependant, je pense que cet article aidera tous ceux qui recherchent un moyen de suivre les erreurs et les délais d’exécution des requêtes getJSON. Par conséquent, ci-dessous ma réponse à la question

La structure getJSON est la suivante (trouvée sur http://api.jqueri.com ): 

$(selector).getJSON(url,data,success(data,status,xhr))

la plupart des gens implémentent cela en utilisant 

$.getJSON(url, datatosend, function(data){
    //do something with the data
});

où ils utilisent l'URL var pour fournir un lien vers les données JSON, le datatosend en tant qu'endroit pour ajouter la "?callback=?" et les autres variables à envoyer pour obtenir les données JSON correctes renvoyées, ainsi que la fonction succès une fonction de traitement des données.

Vous pouvez cependant ajouter les variables status et xhr dans votre fonction de réussite. La variable d'état contient l'une des chaînes suivantes: & "Succès &", & "Non modifié &", & "Erreur &", & " ; timeout & "; ou &"; analyseur d'erreur & "; et la variable xhr contient l'objet XMLHttpRequest renvoyé ( trouvé dans w3schools ) 

$.getJSON(url, datatosend, function(data, status, xhr){
    if (status == "success"){
        //do something with the data
    }else if (status == "timeout"){
        alert("Something is wrong with the connection");
    }else if (status == "error" || status == "parsererror" ){
        alert("An error occured");
    }else{
        alert("datatosend did not change");
    }         
});

De cette façon, il est facile de suivre les délais et les erreurs sans avoir à implémenter un suivi de dépassement de délai personnalisé qui est démarré une fois la demande effectuée.

J'espère que cela aidera quelqu'un qui cherche toujours une réponse à cette question.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top