在 JavaScript 中發出 HTTP 請求的不同方法

本文基於從文件和教程中獲得的基礎知識，探討了發出 HTTP 請求的各種 JavaScript 方法。 我們將研究幾種實用的方法。

1. 取得 API： 一種現代的內建 JavaScript 方法，取代舊的 XMLHttpRequest。它為 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>

   登入後複製

   主要 Fetch API 功能： Fetch API 本質上支援 CORS（跨來源資源共享），並提供對憑證（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中文網其他相關文章！