JavaScript で HTTP リクエストを行うさまざまな方法

この記事では、ドキュメントやチュートリアルから得た基礎知識に基づいて、HTTP リクエストを行うためのさまざまな JavaScript メソッドについて説明します。 いくつかの実際的なアプローチを検討します。

1. Fetch API: 古い XMLHttpRequest に代わる最新の組み込み JavaScript メソッド。 HTTP リクエストに対して、よりクリーンな Promise ベースのインターフェイスを提供します。 コア関数 fetch() は、リソース (サーバー データなど) を取得します。

   <code class="language-javascript">fetch (URL, options)</code>

   デフォルトでは、fetch() は GET を使用します。 Response オブジェクトに解決される Promise を返します。

   例 (MDN から適応):

   <code class="language-javascript">async function getData() {
     const url = "https://example.org/products.json";
     try {
       const response = await fetch(url);
       if (!response.ok) {
         throw new Error(`Response status: ${response.status}`);
       }
       const json = await response.json();
       console.log(json);
     } catch (error) {
       console.error(error.message);
     }
   }</code>

   POST リクエスト: POST リクエストの場合、method オブジェクト内で headers、body、および options を指定します。

   例 (MDN から適応):

   <code class="language-javascript">const response = await fetch("https://example.org/post", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ username: "example" }),
   });</code>

   主なフェッチ API 機能: フェッチ API は本質的に CORS (Cross-Origin Resource Sharing) をサポートし、資格情報 (Cookie、認証データ) に対するきめ細かい制御を提供します。

2. Axios: Fetch API と比較して HTTP リクエストを簡素化する、人気のあるユーザーフレンドリーなサードパーティ ライブラリ。 これは同形です (Node.js とブラウザーの両方で動作します)。

   POST の例 (アロー関数用に変更):

   <code class="language-javascript">const axios = require('axios');
   
   axios.get('/user?ID=12345')
     .then(response => console.log(response))
     .catch(error => console.log(error))
     .finally(() => {});</code>

3. jQuery.ajax: jQuery ライブラリの一部。レガシー プロジェクトでよく見られます。

   <code class="language-javascript">$.ajax({
     url: 'https://api.example.com/data',
     method: 'GET',
     success: function(data) { console.log(data); },
     error: function(error) { console.error('Error:', error); }
   });</code>

4. WebSocket API: クライアントとサーバー間の永続的な双方向通信チャネルを確立するための組み込み JavaScript API。リアルタイム アプリケーション (チャットなど) に最適です。

   例 (MDN から適応):

   <code class="language-javascript">const socket = new WebSocket("ws://localhost:8080");
   socket.addEventListener("open", (event) => { socket.send("Hello Server!"); });
   socket.addEventListener("message", (event) => { console.log("Message from server ", event.data); });</code>

HTTP リクエストの構文は言語やフレームワーク (PHP、Next.js など) によって異なりますが、これらのコア JavaScript メソッドを理解することで、さまざまなコンテキストに適応するための強力な基盤が得られます。

以上がJavaScript で HTTP リクエストを行うさまざまな方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。