JavaScript チュートリアル: HTTP ステータス コードを最初から取得する方法を学ぶ

ゼロから始める: JavaScript が HTTP ステータス コードを取得する方法を教えます

Web 開発では、サーバーと通信し、HTTP ステータスを理解する必要があることがよくあります。コードは非常に重要な重要な部分です。 HTTP ステータス コードは、HTTP リクエストに対するサーバーの応答の識別子であり、サーバーはステータス コードを使用してリクエストの処理結果をクライアントに伝えます。

この記事では、JavaScript を使用してコード例を作成し、フロントエンドで HTTP ステータス コードを取得する方法を説明します。

1. XMLHttpRequest オブジェクトを使用して HTTP ステータス コードを取得する

XMLHttpRequest オブジェクトは、フロントエンドとサーバー間のデータ交換の中核であり、これを使用して HTTP リクエストを送信し、応答ステータスコードを取得します。

まず、XMLHttpRequest オブジェクトを作成します。

var xhr = new XMLHttpRequest();

次に、XMLHttpRequest オブジェクトの open() メソッドを使用して、要求された URL と要求メソッド (GET、POST、PUT、など):

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

setRequestHeader() メソッドを使用してリクエスト ヘッダーを設定することもできます。これは、特定のリクエスト ヘッダーを渡す必要がある場合に非常に便利です。リクエストを送信するための send() メソッド:

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

XMLHttpRequest オブジェクトの readstatechange イベントをリッスンする必要があります。このイベントは、リクエストの状態が変化したときにトリガーされます。リスニング関数では、status 属性を通じて HTTP ステータス コードを取得できます。

xhr.send();

2. フェッチ API を使用して HTTP ステータス コードを取得します。

fetch API は、次の最新のネットワーク リクエストです。 JavaScript メソッドを使用して、HTTP ステータス コードを取得することもできます。

fetch メソッドを使用して GET リクエストを送信し、次のように HTTP ステータス コードを取得します。

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

fetch メソッドは Promise オブジェクトを返すので、 を使用する必要があることに注意してください。 then() を使用して非同期リクエストへの応答を処理します。

3. Axios ライブラリを使用して HTTP ステータス コードを取得する

Axios は、ネットワーク リクエストをより簡潔に送信でき、より使いやすい API を提供する非常に人気のある JavaScript ライブラリです。 Axios を使用して HTTP ステータス コードを取得することもできます。

まず、Axios ライブラリを導入する必要があります:

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

次に、GET リクエストを送信して HTTP ステータス コードを取得するコードは次のとおりです:

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

Axios の簡潔な API とエレガントなチェーン呼び出しにより、ネットワーク リクエストをより簡単に送信できるようになります。

上記の 3 つの方法により、フロントエンドで HTTP ステータス コードを簡単に取得できます。 HTTP ステータス コードを理解すると、ネットワーク リクエストのデバッグと処理を改善し、ユーザー エクスペリエンスを向上させることができます。この記事があなたのお役に立てば幸いです!

以上がJavaScript チュートリアル: HTTP ステータス コードを最初から取得する方法を学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。