Fetch API - 自定義請求物件

在 Fetch API 中，我們也可以藉助 Request 介面的 Request() 建構函式建立一個自定義的 Request 物件。Request 介面為我們提供了對 HTTP 請求的更多控制和靈活性。它提供了各種選項，例如 URL、方法、主體、頭部等，這些選項有助於我們建立自定義的 HTTP 請求。在建立自定義請求物件之前，我們首先了解 Request() 建構函式，使用它可以建立 Request 物件。

Request() 建構函式

要建立請求物件，我們可以使用 Request() 建構函式以及 new 關鍵字。此建構函式包含一個必填引數，即資源的 URL，另一個引數是可選的。

語法

const newRequest = New Request(resourceURL)
Or
const newRequest = New Request(resourceURL, optional)

Request() 建構函式具有以下引數：

resourceURL − 它表示我們想要獲取的資源。它可以是資源的 URL 或 Request 物件。
Options − 它是一個物件，用於提供我們想要應用於請求的自定義設定，選項包括：
method − 它表示請求方法，例如 GET、POST、PUT 和 DELETE。
headers − 用於向請求新增標頭。
body − 用於向請求新增資料。GET 或 HEAD 方法不使用它。
mode − 它表示要用於請求的模式。此引數的值可以是 cors、same-origin、no-cors 或 navigate。預設情況下，mode 引數的值為 cors。
credentials − 它表示要用於請求的憑據。此引數的預設值為 same-origin，但您也可以根據需要使用 omit、same-origin 或 include 等值。
cache − 它表示您想要用於請求的快取模式。
redirect − 用於重定向模式。此引數的值可以是：follow、error 或 manual。預設情況下，此引數設定為 follow 值。
referrer − 它表示一個字串，指定請求的推薦來源。此引數的可能值為 client、URL 或 no-referrer。此引數的預設值與客戶端有關。
referrerPolicy − 用於指定推薦來源策略。
integrity − 用於表示給定請求的子資源完整性值。
keepalive − 它包含一個布林值，用於確定是否為多個請求/響應建立持久連線。
signal − 它包含一個 AbortSignal 物件，用於與請求通訊或中止請求。
priority − 用於指定請求相對於其他請求的優先順序。此引數可以具有以下值之一：
high − 如果我們想將當前 fetch 請求的優先順序設定為高於其他請求。
low − 如果我們想將當前 fetch 請求的優先順序設定為低於其他請求。
auto − 自動查詢當前 fetch 請求相對於其他請求的優先順序。

自定義請求物件

要建立自定義請求物件，我們需要遵循以下步驟：

步驟 1 − 自定義請求選項

optional ={
   method: "POST",
   headers: {"Content-Type": "application/json"},
   body = {
      Name: "Tom",
   Age: 23}
};

步驟 2 − 使用 Request() 建構函式建立自定義請求物件。

const newRequest = new Request(resourceURL, optional

步驟 3 − 使用 fetch() 函式獲取請求物件。

fetch(newRequest)
.then(response =>{
   // Handling the response
}).catch(err => {
   // Handle error
})

示例

在下面的程式中，我們建立一個指令碼，使用自定義 Request 物件傳送資料。為此，我們使用 Request() 建構函式建立一個自定義請求物件，該建構函式有兩個引數：URL（資源 URL）和可選引數。可選引數包含請求的自定義設定，它們是：

method − 在這裡我們使用 POST 方法，表示我們正在向伺服器傳送資料。
body − 包含我們想要傳送的資料。
headers − 它表示資料是 JSON 資料。

現在，我們將請求物件傳遞給 fetch() 函式以傳送請求，處理伺服器返回的響應，並在發生錯誤時進行處理。

<!DOCTYPE html>
<html>
<body>
<script>
   // Customize setting of the request
   const optional = {
      // Setting POST request
      method: "POST",
   
      // Add body which contains data
      body: JSON.stringify({
         id: 311,
         title: "Tom like Oranges",
         age: 37
      }),
      // Setting header
      headers:{"Content-type": "application/json; charset=UTF-8"}
   };
   // Creating request object
   const newRequest = new Request("https://jsonplaceholder.typicode.com/todos", optional);
   
   fetch(newRequest)
   
   // Handling response
   .then(response => response.json())
   .then(returnData => {
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("sendData").innerHTML = JSON.stringify(returnData);
   })
   // Handling error
   .catch(err=>{
      console.error("We get an error:", err);
   });
</script>
   <h2>Fetch API Example</h2>
   <div>
      <!-- Displaying retrieved data-->
      <p id="sendData"></p>
   </div>
</body>
</html>

輸出

結論

這就是我們如何藉助 Request 介面建立自定義請求物件的方法。此介面提供了各種屬性和方法，可以根據我們的需要修改請求主體。在下一篇文章中，我們將學習如何使用 Fetch API 上傳檔案。

列印頁面