Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis

Avant-propos :
Dans le développement Web, des scénarios d'interaction de données avec le serveur sont souvent impliqués. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques.

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

XMLHttpRequest est un objet de requête HTTP, qui peut être utilisé en JavaScript pour interagir avec le serveur. Voici un exemple de code pour obtenir le code d'état HTTP :

let xhr = new XMLHttpRequest();

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

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log('请求成功');
    } else {
      console.log('请求失败，状态码为：' + xhr.status);
    }
  }
};

xhr.send();

Dans le code ci-dessus, nous créons d'abord un objet XMLHttpRequest, puis utilisons la méthode xhr.open pour spécifier la méthode de requête et l'adresse, puis passez. La méthode xhr.onreadystatechange surveille les changements dans l'état de la demande. Lorsque xhr.readyState est XMLHttpRequest.DONE, la requête est terminée. xhr.open方法指定了请求的方式和地址，再通过xhr.onreadystatechange方法监听请求状态的变化。当xhr.readyState为XMLHttpRequest.DONE时，说明请求已完成。

接着，我们通过xhr.status获取到了服务器返回的HTTP状态码。如果状态码等于200，表示请求成功；否则，表示请求失败。

2. 使用Fetch API获取状态码

Fetch API是JavaScript的新特性，提供了更加现代化和强大的与服务器进行数据交互的方式。下面是一个使用Fetch API获取HTTP状态码的示例代码：

fetch('http://example.com/api')
  .then(response => {
    if (response.ok) {
      console.log('请求成功');
    } else {
      console.log('请求失败，状态码为：' + response.status);
    }
  })
  .catch(error => {
    console.log('请求发生错误：', error);
  });

在以上代码中，我们使用了Fetch API的fetch函数发起了一个GET请求。然后通过.then方法处理服务器的响应结果。如果response.ok为true，表示请求成功；否则，表示请求失败。可以通过response.status获取到HTTP状态码。

此外，我们还可以使用.catch

Ensuite, nous avons obtenu le code d'état HTTP renvoyé par le serveur via xhr.status. Si le code d'état est égal à 200, cela signifie que la demande a réussi, sinon cela signifie que la demande a échoué.

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

L'API Fetch est une nouvelle fonctionnalité de JavaScript qui offre un moyen plus moderne et plus puissant d'interagir avec le serveur. Voici un exemple de code qui utilise l'API Fetch pour obtenir le code d'état HTTP :

if (xhr.status === 301) {
  console.log('请求被永久重定向');
}

Dans le code ci-dessus, nous utilisons la fonction fetch de l'API Fetch pour lancer une requête GET. Traitez ensuite le résultat de la réponse du serveur via la méthode .then. Si response.ok est true, cela signifie que la requête est réussie, sinon cela signifie que la requête échoue ; Le code d'état HTTP peut être obtenu via response.status.
De plus, nous pouvons également utiliser la méthode .catch pour détecter les erreurs pendant le processus de demande.
• Autres exemples courants de traitement de codes d'état HTTP
En plus de 200, les codes d'état HTTP ont de nombreuses autres valeurs, et chaque valeur représente une signification différente. Voici quelques exemples courants de gestion du code d'état HTTP :
301 Redirection permanente :

• if (xhr.status === 404) {
    console.log('请求的页面不存在');
  }

404 Page introuvable :

if (xhr.status === 500) {
  console.log('服务器发生错误');
}


500 Erreur de serveur :

🎜

if (xhr.status === 503) {
  console.log('服务当前不可用');
}

🎜🎜503 Service indisponible : 🎜r rreee🎜Par en gérant différents codes d'état en conséquence, vous pouvez mieux gérer différentes situations d'erreur. 🎜🎜Conclusion : 🎜Cet article explique comment utiliser JavaScript pour obtenir le code d'état HTTP et fournit quelques exemples de code spécifiques. En maîtrisant ces connaissances, vous serez en mesure de mieux gérer les erreurs lors de l'interaction avec le serveur et d'améliorer l'efficacité du développement Web. J'espère que cet article vous sera 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!