JavaScript で HTTP ステータス コードを簡単に取得する方法

JavaScript での HTTP ステータス コード取得方法

はじめに:
フロントエンド開発では、バックエンド インターフェイスとのやり取りを処理する必要があることがよくあります。 HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。

1. HTTP ステータス コードとは
HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときにサーバーから返される応答ヘッダーに含まれる数値コードを指します。この数値コードは、サーバーによるリクエストの処理の結果を表します。一般的なステータス コードには、200、404、500 などがあります。

• 1XX: リクエストが受信され、処理が続行されていることを示します。一般的なのは 100 (継続) です。
• 2XX: リクエストがサーバーによって正常に受信、理解され、受け入れられたことを示します。一般的なのは 200 (成功) です。
• 3XX: リクエストを完了するにはさらにアクションが必要であることを示します。一般的なものは 301 (永続リダイレクト) と 302 (一時リダイレクト) です。
• 4XX: クライアント エラー、リクエストに構文エラーが含まれているか、リクエストを完了できないことを示します。一般的なものは 404 (見つかりません) と 403 (禁止) です。
• 5XX: サーバー エラーを示します。サーバーがリクエストを処理中にエラーが発生しました。一般的なものは、500 (サーバー内部エラー) と 503 (サービス利用不可) です。

2. XMLHttpRequest の使用
XMLHttpRequest はサーバーとの対話に使用される組み込みブラウザ オブジェクトで、これを通じて HTTP リクエストを送信し、サーバーの応答を取得できます。サーバー応答を取得する場合、XMLHttpRequest オブジェクトの status 属性を通じて HTTP ステータス コードを取得できます。

具体的なコード例:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api');
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        var status = xhr.status;
        console.log(status);
    }
};
xhr.send();

上記のコードにより、「http://example.com/api」インターフェイスに GET リクエストを送信し、HTTP ステータス コードを取得しました。

3. fetch を使用する
fetch は JavaScript の簡素化されたネットワーク リクエスト API で、Promise を使用してネットワーク リクエストの非同期操作を処理します。 fetch によって返される結果は Promise オブジェクトであり、その res.status 属性を通じて HTTP ステータス コードを取得できます。

具体的なコード例:

fetch('http://example.com/api')
    .then(function(res) {
        var status = res.status;
        console.log(status);
    });

上記のコードを通じて、「http://example.com/api」インターフェイスに GET リクエストを送信し、サーバー応答の受信後にそれを取得しました。 HTTPステータスコード。

上記は、JavaScript を使用して HTTP ステータス コードを取得する 2 つの一般的な方法であり、具体的なコード例が示されています。フロントエンド開発では、HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理して、ユーザー エクスペリエンスとアプリケーションの信頼性を向上させることができます。この記事が皆さんのお役に立てば幸いです!

以上がJavaScript で HTTP ステータス コードを簡単に取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。