JavaScript で同期 HTTP リクエストを作成するにはどうすればよいですか?

現在のデジタル環境では、HTTP リクエストを行う行為は、クライアントとサーバー間のデータの送受信に不可欠な部分です。非同期リクエストはノンブロッキング エクスペリエンスを提供するため、一般的になり、最終的に全体的なユーザー エクスペリエンスが向上します。ただし、場合によっては、同期 HTTP リクエストが必要または望ましいことが判明する場合があります。次の説明では、JavaScript を使用して同期 HTTP リクエストを作成するアルゴリズムについて詳しく説明します。また、2 つの異なるアプローチと、それに対応するコードの説明と実際のアプリケーションについても説明します。

JavaScript で同期 HTTP リクエストを行うには、後続のステージを含む基本アルゴリズムを実行する必要があります -

まず、HTTP リクエスト オブジェクトの例を生成します。
2 番目に、方法論、Uniform Resource Locator (URL) を指定し、リクエスト同期モードを有効にしてリクエストを調整します。
3 番目に、リクエストを送信します。
4 つ目は、返信を待ちます。
最後に、それに応じて応答を処理します。

• ＃＃＃方法＃＃＃
XMLHttpRequestの使用

XMLHttpRequest は、かなり長い間使用されてきた JavaScript の既存のオブジェクトです。最新の代替手段に取って代わられていますが、依然として同期 HTTP リクエストを非常に適切に実行します。 XMLHttpRequest -

この例では、まず新しい XMLHttpRequest インスタンスを作成します。次に、open() メソッドを呼び出してリクエストを構成します。最初のパラメータは HTTP メソッド (GET)、2 番目のパラメータは URL、3 番目のパラメータはリクエストを非同期にするかどうかを示すブール値 (同期リクエストの場合は false) です。最後に、send() メソッドを使用してリクエストを送信し、応答を待ちます。ステータスが 200 (OK) の場合は応答テキストを返し、それ以外の場合はエラーをスローします。

前に定義した synchronousRequest 関数を使用します -

この例では、プロトタイプ URL を使用して synchronousRequest 関数を呼び出します。リクエストが成功すると、応答情報がコンソールに記録されます。ただし、失敗した場合は、コンソールにエラー メッセージが記録されます。

Get APIを使用する

Fetch API は、XMLHttpRequest に代わる最新の API であり、より柔軟で使いやすいように設計されています。残念ながら、ネイティブの fetch() 関数は同期リクエストをサポートしていません。ただし、async/await を使用して同期のような動作を作成することはできます -

この例では、fetch() 関数を使用して Promise を提供します。 await キーワードを使用して、Promise が終了するまで実行を一時停止してから、後続のコード行に進みます。応答が満足のいくものである場合は応答テキストを取得しますが、そうでない場合はエラーをトリガーします。

前に定義した synchronousFetch 関数を使用します -

この例では、非同期関数で synchronousFetch 関数を呼び出して、wait キーワードを正しく処理します。前の例と同様に、リクエストが成功した場合は応答データをコンソールに記録し、そうでない場合はエラー メッセージが記録されます。

非ブロッキングな性質のため、非同期リクエストは一般に好まれますが、JavaScript の同期 HTTP リクエストにも依然として使用例があります。同期 HTTP リクエストを作成するためのアルゴリズムについて説明し、古い XMLHttpRequest メソッドと、async/await を備えた最新の Fetch API を含む 2 つの異なるアプローチを検討しました。同期リクエストは JavaScript コードの実行をブロックし、ユーザー エクスペリエンスに悪影響を与える可能性があるため、注意して使用する必要があることに注意してください。

以上がJavaScript で同期 HTTP リクエストを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。