Détection des problèmes JSONP
Si vous ne voulez pas télécharger une dépendance, vous pouvez détecter l'état d'erreur vous-même. C'est très simple.
Vous ne serez en mesure de 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 au bout d'un certain temps, il y aura une erreur. L'erreur peut être n'importe quoi, cependant.
Voici une méthode simple pour vérifier les erreurs. Il suffit d'utiliser 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 l'a mentionné thedawnrider 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 ? Lisez la suite...
Voici comment fonctionne JSONP en quelques mots :
JSONP n'utilise pas XMLHttpRequest comme les requêtes AJAX ordinaires. Au lieu de cela, il injecte un <script> dans la page, où l'attribut "src" est l'URL de la demande. Le contenu de la réponse est enveloppé dans une fonction Javascript qui est ensuite exécutée lors du téléchargement.
Par exemple.
Demande JSONP : https://api.site.com/endpoint?this=that&callback=myFunc
Javascript va injecter cette balise script dans le DOM :
<script src="https://api.site.com/endpoint?this=that&callback=myFunc"></script>
Que se passe-t-il lorsqu'un <script> est ajouté au DOM ? Évidemment, elle est exécutée.
Supposons que la réponse à cette requête donne un résultat JSON du type :
{"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 quand vous exécutez ceci :
<script>{"answer":42}</script>
Eh bien, rien. C'est juste un objet. Il n'est pas stocké, enregistré, et rien ne se passe.
C'est pourquoi les requêtes JSONP enveloppent leurs résultats dans une fonction. Le serveur, qui doit supporter la sérialisation JSONP, voit la fonction callback que vous avez spécifié, et renvoie ceci à la place :
myFunc({"answer":42})
Alors ceci est exécuté à la place :
<script>myFunc({"answer":42})</script>
... ce qui est beaucoup plus utile. Quelque part dans votre code se trouve, dans ce cas, une fonction globale appelée myFunc :
myFunc(data)
{
alert("The answer to life, the universe, and everything is: " + data.answer);
}
C'est tout. C'est la "magie" de JSONP. Il est ensuite très simple d'intégrer une vérification du délai d'attente, comme indiqué ci-dessus. Faites la demande et immédiatement après, lancez un délai d'attente. Au bout de X secondes, si votre drapeau n'a toujours pas été activé, cela signifie que la demande a expiré.
