Maîtrisez les compétences pratiques pour obtenir des codes de statut HTTP en JavaScript

Conseils pratiques : Pour maîtriser la méthode d'obtention du code d'état HTTP en JavaScript, des exemples de code spécifiques sont nécessaires

Introduction :
Dans le développement web, une interaction des données avec le backend est souvent requise. Dans ce processus, il est très important de comprendre le code d'état HTTP, qui peut nous aider à déterminer si la requête aboutit et à gérer les conditions d'erreur. Cet article expliquera comment obtenir le code d'état HTTP via JavaScript et fournira des exemples de code spécifiques pour aider les lecteurs à maîtriser rapidement cette technique.

1. Utilisez l'objet XMLHttpRequest pour obtenir le code d'état HTTP
XMLHttpRequest est un objet utilisé pour la communication asynchrone entre le client et le serveur. En JavaScript, nous pouvons utiliser l'objet XMLHttpRequest pour envoyer des requêtes HTTP et obtenir le code d'état correspondant.

Exemple de code :

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) { // 请求完成
    let status = xhr.status;
    console.log('HTTP状态码：', status);
  }
}
xhr.send();

Parsing :
Tout d'abord, nous créons une instance d'objet XMLHttpRequest xhr. Ensuite, utilisez la méthode xhr.open() pour spécifier le type de requête (GET, POST, etc.) et l'URL demandée. Le troisième paramètre est l'identifiant asynchrone. Le définir sur true signifie envoyer la requête de manière asynchrone.

Ensuite, nous lions une fonction de rappel à l'événement onreadystatechange de l'objet xhr. Cette fonction de rappel sera déclenchée lorsque l'état de l'objet xhr change. Lorsque l'événement onreadystatechange est déclenché, nous déterminons d'abord si le readyState de l'objet xhr est 4, ce qui signifie que la requête a été terminée et que la réponse a été reçue.

Enfin, nous obtenons le code d'état HTTP via l'attribut xhr.status et l'imprimons sur la console.

2. Utilisez l'API fetch pour obtenir le code d'état HTTP
l'API fetch est une API de requête réseau moderne basée sur Promise, qui offre un moyen plus concis et flexible de communiquer sur le réseau. Grâce à l'API fetch, nous pouvons également obtenir facilement le code d'état HTTP.

Exemple de code :

fetch('http://api.example.com/data')
  .then(response => {
    let status = response.status;
    console.log('HTTP状态码：', status);
  })
  .catch(error => {
    console.log('请求发生错误：', error);
  });

Analyse :
Tout d'abord, nous utilisons la fonction fetch pour envoyer une requête GET et transmettre l'URL demandée en paramètre. La fonction fetch renvoie un objet Promise.

Ensuite, nous utilisons la méthode then de l'objet Promise pour définir une fonction de rappel. Lorsque la requête revient, la fonction de rappel sera déclenchée et acceptera un objet de réponse comme paramètre.

Dans la fonction de rappel, nous obtenons le code d'état HTTP via l'attribut réponse.status et l'imprimons sur la console.

Si une erreur se produit dans la requête, nous pouvons capturer l'erreur via la méthode catch et imprimer les informations d'erreur sur la console.

3. Utilisez la bibliothèque axios pour obtenir le code d'état HTTP
axios est un client HTTP basé sur Promise qui peut être utilisé dans les navigateurs et Node.js. Il fournit une API pratique pour envoyer des requêtes HTTP et traiter les réponses.

Exemple de code :

axios.get('http://api.example.com/data')
  .then(response => {
    let status = response.status;
    console.log('HTTP状态码：', status);
  })
  .catch(error => {
    console.log('请求发生错误：', error);
  });

Analyse :
Tout d'abord, nous utilisons la méthode get d'axios pour envoyer une requête GET et transmettre l'URL demandée en paramètre. La méthode get renvoie un objet Promise.

Ensuite, nous utilisons la méthode then de l'objet Promise pour définir une fonction de rappel. Lorsque la requête revient, la fonction de rappel sera déclenchée et acceptera un objet de réponse comme paramètre.

Dans la fonction de rappel, nous obtenons le code d'état HTTP via l'attribut réponse.status et l'imprimons sur la console.

Si une erreur se produit dans la requête, nous pouvons capturer l'erreur via la méthode catch et imprimer les informations d'erreur sur la console.

Conclusion :
Cet article présente trois méthodes courantes pour obtenir les codes d'état HTTP : en utilisant l'objet XMLHttpRequest, l'API de récupération et la bibliothèque axios. En maîtrisant ces méthodes et en étant capables de les utiliser de manière flexible, nous pouvons déterminer plus précisément l'état de la demande et gérer les situations d'erreur, améliorant ainsi l'efficacité et la qualité du développement Web. J'espère que cet article pourra être utile aux lecteurs.

Références :

1. MDN Web Docs : XMLHttpRequest - https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
2. MDN Web Docs : Récupérer l'API - https://developer mozilla. .org/en-US/docs/Web/API/Fetch_API
3. Axios - https://axios-http.com/

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!