Comment faire une demande HTTP dans JavaScript

'Xmlhttprequest' et 'aller chercher()' sont deux fonctions puissantes en javascript qui peuvent être utilisées pour passer des appels ajax. XMLHttpRequest (XHR) est une technologie héritée qui existe depuis les premiers jours du Web. Il vous permet de faire des demandes HTTP du côté client, et il est toujours largement utilisé aujourd'hui. La fonction fetch (), quant à elle, est un ajout plus récent au javascrip. Il utilise des promesses, il est donc plus facile d'écrire et de déboguer, et il prend également en charge le streaming et d'autres fonctionnalités modernes.

XMLHttpRequest et Fetch () sont d'excellents outils pour faire des appels AJAX, mais fetch () est généralement considéré comme la meilleure option pour la plupart des applications. Donc, si vous cherchez un moyen de passer des appels ajax en javascript, essayez fetch (). Nous pensons que vous serez agréablement surpris par les résultats!

Faire une demande HTTP dans JavaScript

Voici un exemple d'utilisation Xmlhttprequest faire un OBTENIR Demande de récupération de données de l'API distante:

const xhr = new xmlHttpRequest (); xhr.ResponseType = 'JSON'; xhr.onreadystatechange = () => if (xhr.ReadyState === XmlHttpRequest.Fait) console.journal (xhr.réponse); xhr.Open ('Get', 'https: // API.exemple.com / '); xhr.setRequestHeader ('Authorization', 'Bearer' + api_key); xhr.envoyer();

123456789101112

const xhr = new xmlHttpRequest (); xhr.ResponseType = 'JSON'; xhr.onreadystatechange = () => if (xhr.ReadyState === XmlHttpRequest.Fait) console.journal (xhr.réponse); xhr.Open ('Get', 'https: // API.exemple.com / '); xhr.setRequestHeader ('Authorization', 'Bearier' + api_key); xhr.envoyer();

Voici un exemple d'utilisation aller chercher() faire un OBTENIR Demande de récupérer les données d'une API distante.

fetch ('https: // api.exemple.com / ', Headers: ' Authorization ':' Bearer '+ api_key) .alors (réponse => réponse.JSON ()) .alors (data => console.log (données));

1234567

fetch ('https: // api.exemple.com / ', Headers: ' Authorization ':' Bearer '+ api_key) .alors (réponse => réponse.JSON ()) .alors (data => console.log (données));

Les deux exemples supposent que vous avez une clé API stockée dans une variable appelée API_KEY.

Vous pouvez aussi utiliser aller chercher() pour faire d'autres types de demandes HTTP, telles que POSTE, METTRE, et SUPPRIMER, en passant un objet d'options comme deuxième argument. Par exemple:

fetch ('/ url', méthode: 'post', corps: json.stringify (name: 'John', Âge: 30,), en-têtes: 'contenu-type': 'application / json',,);

12345678910

fetch ('/ url', méthode: 'post', corps: json.stringify (name: 'John', Âge: 30,), en-têtes: 'contenu-type': 'application / json',,);

Noter que 'Xmlhttprequest' et 'aller chercher()' sont asynchrones, ce qui signifie que le code ne bloquera pas pendant la demande. Au lieu de cela, la réponse sera traitée dans une fonction de rappel ou avec une promesse.