JavaScript : JSON, AJAX et les requêtes asynchrones

Réagir lors d'une réponse négative du serveur

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Grâce aux fonctions retour, vous pourrez câbler des comportements lors d'une erreur. Ainsi, vous serez en mesure d'afficher des informations.
05:27

Transcription

Depuis le début, nos requêtes avec « jQuery » fonctionnent, c'est parfait, c'est du 200, nickel, le serveur nous répond que tout va bien. Mais comment on va faire si le serveur nous répond que tout va mal ? Que ça ne s'est pas passé comme on voulait, que la requête n'a pas fonctionné. Pour émuler ce comportement, très simplement, vous pouvez faire une requête avec votre formulaire vers une URL qui n'existe pas. Vous tapez n'importe quoi au clavier, vous allez avoir une URL qui n'existe pas, donc un statut de réponse qui n'est pas correct et pour le tester, vous allez simplement recharger la page, remplir votre formulaire pareil avec de la donnée de test et faire « Envoyer ». Et là, vous allez remarquer que vous allez obtenir un « 404 Not Found ». Effectivement, la ressource n'est pas trouvée, vous avez envoyé les données vers une URL qui n'existe pas et du coup, vous avez une erreur dans votre code. De même, si vous regardez dans votre « Network », vous avez aussi une « 404 ». Donc là, la console qui est faite ici, le « console.log » qui est fait ici c'est un « console.log » qui est fait par « jQuery » puisque lui, il va automatiquement vous faire un « console .log » si il y a eu un problème, comme ça, c'est bien. Par contre, vous pouvez quand même surcharger le comportement. C'est-à-dire que vous, vous pouvez agir et faire quelque chose si il y a eu un souci dans la page. Alors, on pourrait essayer, tout simplement de mettre en place ce comportement et d'ajouter une information à l'intérieur par exemple, d'un « span », donc là, on pourrait se faire un « span » avec du style, voilà, « span: style » comme ça. Alors, attention, c'est « - », si vous avez envie d'avoir la complétion, on va se mettre au bout, on va faire comme ça. il ne va pas nous le mettre, c'est pas grave, vous allez faire « span ». On va mettre du style CSS dessus, qu'est-ce qu'on va mettre comme style CSS, on va mettre simplement « color: red » puis, on va le laisser comme ça. Alors, mettez-lui un Id aussi pour pouvoir récupérer et pour pouvoir dire que c'est les erreurs, par exemple et constituez-le avant, c'est toujours très important de constituer ça. « errorSpan », ça va être du coup égal à « jQuery » ici et donc le « #error » que l'on a câblé juste au-dessus. Maintenant, je veux mettre une erreur « Callback », on a fait une « successCallback », on pourrait avoir une « errorCallback », donc « errorCallback » par exemple, donc ici, vous allez l'appeler « errorCallback » pour le coup, ça va récupérer la réponse et nous, ce qu'on va faire, c'est qu'on va injecter à l'intérieur donc « error.span » comme ça, là, on va lui faire un « append » et on va lui envoyer la « response » dedans qui va apparaître en rouge parce qu'il y aura eu une erreur. Maintenant, par contre, ça, il va falloir le définir. Alors, on a défini ce qui se passe en « success » et est-ce qu'on n'a pas une méthode qui existe pour récupérer les erreurs ? Alors, on a bien sûr, tout un tas de méthodes sur la fonction et notamment, on en a une qui s'appelle « error ». Il s'est passé quelque chose de pas bien, donc il y a des erreurs, donc on veut une « Callback » d'« error », on va donc mettre ici la « Callback » d'« error » à cet endroit et ça va fonctionner tout seul. Ce qui fait que quand on va avoir, ici, des erreurs sur le formulaire, on va les récupérer, ces erreurs-là vont être récupérées à l'intérieur. Alors, attention par contre, parce que ici, la « Callback » d'erreur, elle n'a pas envie de passer. On peut faire un petit « console.log » pour voir ce qui se passe : « console.log » ici, à cet endroit-là, de « response » pour avoir la « response » et on se rendra compte qu'on va charger ici aussi, voilà, on va relancer à cet endroit-là et là, on va faire « Envoyer » et là, on a bien les informations qui apparaissent. Alors, le problème, c'est que ce qu'on essaie d'injecter ici, comme vous pouvez le voir, c'est un objet, ce n'est pas vraiment la réponse réelle, nous, ce qu'on aimerait, c'est pouvoir envoyer la réponse. Donc, c'est en fait cette propriété de l'objet qu'est la « response text ». Donc, quand vous codez une « Callback » d'erreur comme ça, là, il y a la « response », ce que vous allez envoyer dans un élément HTML, il faudrait que ce soit comme ça, la « response », voire « response text » pour récupérer vraiment l'erreur et pour l'afficher dans la page, sinon, ça ne marchera pas et là, vous voyez bien que vous avez le « Not Found » qui arrive. On vient là de traiter une erreur avec Ajax. Vous vous souvenez qu'on peut aussi utiliser la méthode « POST », vous vous en souvenez, de ça ? On va essayer de le faire. Alors là, plutôt que d'utiliser Ajax, je vais utiliser « POST », d'accord ? Les datas, ça va être ça, directement, donc on peut retirer toute cette partie-là qui ne sert plus à rien, donc là, les datas, ça va être ça, donc on sait que quand on fait un « POST », on envoie les datas. Ça va se passer comme ça : « data », ensuite, la « successCallback » si ça fonctionne et enfin, la « errorCallback » si ça marche pas. C'est comme ça que ça doit marcher, vous câblerez les deux, en fait, le « success », l'erreur et ça va faire à peu près la même chose que ce qu'on avait avant en un peu plus court. Alors, attention par contre parce qu'il vous dira que ce n'est pas une erreur au niveau de cette partie-là et donc ça ne va pas forcément être génial parce que pour la « Callback » d'erreur, vous pourrez pas la câbler directement sur « POST », enfin, en tout cas, vous pourrez pas la câbler comme ça, directement sur « POST ». Donc, allez voir la signature de « POST » directement et vous allez voir que pour « POST », on doit lui passer effectivement ce qui se passe en « success » et voyez qu'il y a pas de possibilité de lui passer les erreurs directement. On doit lui donner en fait, autre chose et ce autre chose, c'est ce qu'on va voir après, ça va être les « Promise », en fait, on va avoir un système de « Promise » qui existe que l'on va pouvoir utiliser, malheureusement, il y a pas possibilité de passer tout de suite une fonction d'erreur ce sera obligatoirement la fonction de « success ». Si vous voulez gérer les erreurs, vous resterez sur la méthode qu'on a utilisée tout à l'heure qui, pour le coup, est la plus intéressante et qui vous permet de récupérer les erreurs et de faire quelque chose avec. Donc, je vous laisse le code dans cet état-là et bien sûr, là, on va voir comment utiliser les promesses et à quoi ça correspond et qu'est-ce que ça permet en plus, par rapport, du coup, à une fonction de « Callback ». Vous allez voir que c'est vraiment très intéressant.

JavaScript : JSON, AJAX et les requêtes asynchrones

Découvrez les requêtes asynchrones en Javascript avec le format JSON et la norme AJAX. Assimilez les techniques du développement d’applications web en single-page.

2h03 (30 vidéos)
Aucun commentaire n´est disponible actuellement

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !