Tutoriel JavaScript : Apprenez à obtenir des codes d'état HTTP à partir de zéro

Partez de zéro : JavaScript vous apprend à obtenir les codes d'état HTTP

Dans le développement Web, nous avons souvent besoin de communiquer avec le serveur, et comprendre les codes d'état HTTP est une partie très importante. Le code d'état HTTP est un identifiant de la réponse du serveur à une requête HTTP. Le serveur utilise le code d'état pour indiquer au client le résultat du traitement de la requête.

Cet article utilisera JavaScript pour écrire des exemples de code afin de vous apprendre à obtenir des codes d'état HTTP sur le front-end.

1. Utilisez l'objet XMLHttpRequest pour obtenir le code d'état HTTP

L'objet XMLHttpRequest est au cœur de l'échange de données entre le front-end et le serveur. Nous pouvons l'utiliser pour envoyer des requêtes HTTP et obtenir le code d'état de réponse.

Tout d'abord, nous créons un objet XMLHttpRequest :

var xhr = new XMLHttpRequest();

Ensuite, nous pouvons utiliser la méthode open() de l'objet XMLHttpRequest pour spécifier l'URL demandée et la méthode de requête (GET, POST, PUT, etc.) :

xhr.open('GET', 'http://www.example.com', true);

Nous peut également utiliser la méthode setRequestHeader() pour définir l'en-tête de la requête, ce qui est très utile lorsque vous devez transmettre des en-têtes de requête spécifiques :

xhr.setRequestHeader('Content-Type', 'application/json');

Ensuite, nous utilisons la méthode send() pour envoyer la requête :

xhr.send();

Nous devons écoutez l'événement readystatechange de l'objet XMLHttpRequest, qui est déclenché lorsque l'état de la demande change. Dans la fonction d'écoute, nous pouvons obtenir le code d'état HTTP via l'attribut status :

xhr.onreadystatechange = function() {
   if(xhr.readyState === 4) {
      console.log('HTTP状态码：', xhr.status);
   }
};

2. Utilisez l'API fetch pour obtenir le code d'état HTTP

l'API fetch est une méthode de requête réseau moderne en JavaScript, nous pouvons également l'utiliser pour obtenir le code d'état HTTP.

Utilisez la méthode fetch pour envoyer une requête GET et obtenir le code d'état HTTP. Le code est le suivant :

fetch('http://www.example.com')
   .then(response => {
      console.log('HTTP状态码：', response.status);
   });

Il convient de noter que la méthode fetch renvoie un objet Promise et que nous devons utiliser .then() pour. gérer la réponse de la requête asynchrone.

3. Utilisez la bibliothèque Axios pour obtenir le code d'état HTTP

Axios est une bibliothèque JavaScript très populaire qui peut envoyer des requêtes réseau de manière plus concise et fournit une API plus conviviale. Nous pouvons également utiliser Axios pour obtenir les codes d'état HTTP.

Tout d'abord, nous devons présenter la bibliothèque Axios :

<script src="https://cdn.jsdelivr.net/npm/axios"></script>

Ensuite, le code pour envoyer une requête GET et obtenir le code d'état HTTP est le suivant :

axios.get('http://www.example.com')
   .then(response => {
      console.log('HTTP状态码：', response.status);
   });

L'API concise d'Axios et les appels en chaîne élégants nous permettent d'envoyer des requêtes réseau plus commodément.

Avec les trois méthodes ci-dessus, nous pouvons facilement obtenir le code d'état HTTP sur le front-end. Comprendre les codes d'état HTTP peut nous aider à mieux déboguer et gérer les requêtes réseau et à améliorer l'expérience utilisateur. J'espère que cet article pourra vous être utile !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!