JavaScript を使用して http リクエストをインターセプトする方法

ネットワークアプリケーションの継続的な開発に伴い、Web フロントエンド開発も日々変化しており、Web フロントエンド開発に必須の言語の 1 つである JavaScript も常に発展しています。 JavaScript は、フロントエンドの動的効果を実現するために使用できるだけでなく、HTTP リクエストをインターセプトするためにも使用できます。

HTTP リクエストのインターセプトとは何ですか?

HTTP、正式名は Hyper Text Transfer Protocol で、ハイパー テキスト転送プロトコルです。 Web アプリケーションでは、クライアントとサーバー間の通信は HTTP プロトコルに基づいています。 HTTP リクエストでは、HTTP リクエストをインターセプトし、リクエストがサーバーに到達する前に変更またはインターセプトできます。このようにして、リクエストがサーバーに送信される前に、HTTP リクエスト ヘッダーを変更または追加したり、リクエスト パラメータやリクエスト結果を表示したりできます。

なぜ HTTP リクエストをインターセプトするのでしょうか?

HTTP リクエストをインターセプトすることで、実行中のプロセス全体とネットワーク アプリケーションのステータスをより深く理解できるようになります。すべてのリクエストのリアルタイムのステータスを把握してリアルタイムで記録し、問題を適時に発見して処理することができます。

開発プロセス中、特定の機能を実現するための実際のニーズに応じて HTTP リクエストをインターセプトすることで、リクエスト ヘッダーを変更、追加、削除できます。たとえば、リクエスト ヘッダーに検証情報を追加したり、フロントエンドがバックエンド データをリクエストするときにリクエストに固定パラメーターを追加したり、リクエスト プロセスを制御したりできます。

HTTP リクエストをインターセプトするにはどうすればよいですか?

ブラウザには、XMLHttpRequest やフェッチなどの HTTP リクエストをインターセプトするために使用できる API がいくつか用意されています。 1 つずつ見てみましょう:

1. XMLHttpRequest インターセプト リクエスト

ネイティブ JavaScript では、XMLHttpRequest を使用してリクエストを開始できます。 HTTP リクエストを表す readState 属性には 5 つの状態があります。

readyState 状態の HTTP リクエストを監視し、インターセプトできます。

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {  // see the below 5 states
    console.log( xhr.responseText );
  }
};

xhr.open("GET", "/test", true);

xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

xhr.send();

上記のコードでは、まず XMLHttpRequest オブジェクト xhr を作成し、次に xhr のステータスを監視します。 readyState が 4 の場合、リクエストが応答されたことを意味します。

2. fetch はリクエストをインターセプトします

fetch はネットワーク リクエスト用の API でもあり、よりシンプルで便利なリクエスト メソッドを提供します。

fetch('/test')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

フェッチでは、then() 関数を使用して応答に反応できます。ここで、最初の関数は応答オブジェクトの応答を返し、次にその応答を JSON に解析して myJson に入れます。

特定の機能を実現するために、フェッチ リクエストをインターセプトして変更することもできます。

概要

HTTP リクエストをインターセプトすることで、すべてのリクエストのステータスをリアルタイムで監視および記録し、問題をタイムリーに発見して対処できるようになります。同時に、HTTP リクエストをインターセプトし、リクエスト ヘッダーを変更して特定の機能を実現することもできます。 Web アプリケーションでは HTTP リクエストのインターセプトが不可欠であり、JavaScript は HTTP リクエストをインターセプトする一般的な方法であり、Web アプリケーションの全体的な実行ステータスをより深く理解し、特定の機能を実装するのに役立ちます。

以上がJavaScript を使用して http リクエストをインターセプトする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。