JavaScript で HTTP ステータス コードを取得する実践的なスキルをマスターする

実践的なヒント: JavaScript で HTTP ステータス コードを取得する方法をマスターします。具体的なコード例が必要です。

はじめに:

Web 開発では、多くの場合、バックエンドと通信するため データ対話を実行します。このプロセスでは、HTTP ステータス コードを理解することが非常に重要です。これは、リクエストが成功したかどうかを判断し、エラー状態を処理するのに役立ちます。この記事では、JavaScript を通じて HTTP ステータス コードを取得する方法を紹介し、読者がこの手法をすぐに習得できるように具体的なコード例を示します。

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

XMLHttpRequest は、クライアントとサーバー間の非同期通信に使用されるオブジェクトです。 JavaScript では、XMLHttpRequest オブジェクトを使用して HTTP リクエストを送信し、対応するステータス コードを取得できます。

コード例:

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();

分析:

まず、XMLHttpRequest オブジェクト インスタンス xhr を作成します。次に、xhr.open() メソッドを使用して、リクエストのタイプ (GET、POST など) とリクエストされた URL を指定します。 3 番目のパラメータは非同期識別子で、これを true に設定すると、リクエストが非同期に送信されます。

次に、コールバック関数を xhr オブジェクトの onreadystatechange イベントにバインドします。このコールバック関数は、xhr オブジェクトの状態が変化するとトリガーされます。 onreadystatechange イベントがトリガーされると、まず xhr オブジェクトの readyState が 4 かどうかを判断します。これは、リクエストが完了し、レスポンスが受信されたことを意味します。

最後に、xhr.status 属性を通じて HTTP ステータス コードを取得し、コンソールに出力します。

2. fetch API を使用して HTTP ステータス コードを取得する

fetch API は、Promise に基づいた最新のネットワーク リクエスト API であり、ネットワーク上で通信するためのより簡潔かつ柔軟な方法を提供します。フェッチ API を使用すると、HTTP ステータス コードを簡単に取得することもできます。

コード例:

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

分析:

まず、fetch 関数を使用して GET リクエストを送信し、リクエストされた URL をパラメータとして渡します。 fetch 関数は Promise オブジェクトを返します。

次に、Promise オブジェクトの then メソッドを使用してコールバック関数を定義します。リクエストが返されると、コールバック関数がトリガーされ、パラメータとして応答オブジェクトを受け取ります。

コールバック関数では、response.status 属性を通じて HTTP ステータス コードを取得し、コンソールに出力します。

リクエストでエラーが発生した場合、catch メソッドを通じてエラーをキャプチャし、コンソールにエラー情報を出力できます。

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

axios は、ブラウザーと Node.js で使用できる Promise ベースの HTTP クライアントです。 HTTP リクエストの送信と応答の処理に便利な API を提供します。

コード例:

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

分析:

まず、axios の get メソッドを使用して GET リクエストを送信し、リクエストされた URL をパラメータとして渡します。 get メソッドは Promise オブジェクトを返します。

次に、Promise オブジェクトの then メソッドを使用してコールバック関数を定義します。リクエストが返されると、コールバック関数がトリガーされ、パラメータとして応答オブジェクトを受け取ります。

コールバック関数では、response.status 属性を通じて HTTP ステータス コードを取得し、コンソールに出力します。

リクエストでエラーが発生した場合、catch メソッドを通じてエラーをキャプチャし、コンソールにエラー情報を出力できます。

結論:

この記事では、HTTP ステータス コードを取得するための 3 つの一般的な方法 (XMLHttpRequest オブジェクト、フェッチ API、および axios ライブラリの使用) を紹介します。これらの方法をマスターし、柔軟に使いこなせるようになると、より正確にリクエスト状況を把握したり、エラー時の対処ができるようになり、Web開発の効率と品質が向上します。この記事が読者にとって役立つことを願っています。

参考:
2. MDN Web ドキュメント: XMLHttpRequest - https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
## MDN Web ドキュメント: Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
3. Axios - https://axios-http.com/

# ##

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