如何在 JavaScript 中發出同步 HTTP 請求？

在目前的數位領域，發出 HTTP 請求的行為是客戶端和伺服器之間傳輸和接收資料的重要組成部分。非同步請求因其提供非阻塞體驗而變得流行，最終增強了整體用戶體驗。然而，在某些情況下，同步 HTTP 請求可能被證明是必要的或更可取的。在接下來的敘述中，我們將深入研究使用 JavaScript 建立同步 HTTP 請求的演算法。我們還將探索兩種不同的方法及其相應的程式碼解釋和實際應用。

演算法

要在 JavaScript 中啟動同步 HTTP 請求，必須執行包含後續階段的基本演算法 -

• 首先，產生 HTTP 請求物件的範例。

• 其次，透過規定方法論、統一資源定位符（URL）以及啟用請求同步模式來調整請求。

• 第三，發送請求。

• 第四，等待回覆。

• 最後，相應地處理回應。

方法

使用 XMLHttpRequest

XMLHttpRequest 是 JavaScript 中預先存在的對象，已經使用了相當長的時間。儘管它已被現代替代方案所取代，但它仍然可以很好地執行同步 HTTP 請求。以下是如何實作 XMLHttpRequest 的說明 -

function synchronousRequest(url) {
   const xhr = new XMLHttpRequest();
   xhr.open('GET', url, false);
   xhr.send(null);
   if (xhr.status === 200) {
      return xhr.responseText;
   } else {
      throw new Error('Request failed: ' + xhr.statusText);
   }
}

在此範例中，我們首先建立一個新的 XMLHttpRequest 實例。接下來，我們呼叫 open() 方法來設定請求。第一個參數是 HTTP 方法 (GET)，第二個參數是 URL，第三個參數是一個布林值，指示請求是否應該非同步（同步請求為 false）。最後，我們使用 send() 方法發送請求並等待回應。如果狀態為 200（OK），我們回傳回應文字；否則，我們會拋出錯誤。

範例

使用前面定義的synchronousRequest函數 -

try {
   const url = 'https://api.example.com/data';
   const responseData = synchronousRequest(url);
   console.log('Response data:', responseData);
} catch (error) {
   console.error('Error:', error.message);
}

在此範例中，我們使用原型 URL 呼叫 synchronousRequest 函數。如果請求成功，我們會將回應資訊記錄到控制台。但是，如果失敗，我們會將錯誤訊息記錄到控制台。

使用取得 API

Fetch API 是 XMLHttpRequest 的現代替代品，其設計更加靈活且更易於使用。不幸的是，本機 fetch() 函數不支援同步請求。但是，您可以使用 async/await 來建立類似同步的行為 -

async function synchronousFetch(url) {
   const response = await fetch(url);
   if (response.ok) {
      const data = await response.text();
      return data;
   } else {
      throw new Error('Request failed: ' + response.statusText);
   }
}

在本例中，我們利用 fetch() 函數來提供 Promise。我們應用await關鍵字暫停執行，直到Promise結束，然後再繼續執行後續程式碼行。如果回應令人滿意，我們檢索回應文字；否則，我們會觸發錯誤。

範例

使用前面定義的synchronousFetch函數 -

import React, { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
   const [responseData, setResponseData] = useState(null);
   useEffect(() => {
      (async () => {
         try {
            const url = "https://jsonplaceholder.typicode.com/todos/1";
            const response = await fetch(url);
            if (!response.ok) {
               throw new Error(`HTTP error! Status: ${response.status}`);
            }
            const data = await response.json();
            setResponseData(data);
         } catch (error) {
            console.error("Error:", error.message);
         }
      })();
   }, []);
   return (
      <div className="App">
         <h1>API Data</h1>
         {responseData ? (
            <pre class="brush:php;toolbar:false">{JSON.stringify(responseData, null, 2)}

) : (

Loading...

)}