Fetch API - 響應

Fetch API 提供了一個特殊的介面來建立對請求的響應，該介面的名稱是 Response。此介面提供了一個 Response() 建構函式來建立一個響應物件。它提供了各種方法和屬性來訪問和處理響應資料。

建構函式

要建立一個響應物件，我們可以使用 Response() 建構函式以及一個 new 關鍵字。此建構函式可能包含引數，也可能不包含引數。

語法

const newResponse = New Response()
Or
const newResponse = New Response(rBody)
Or
const newResponse = New Response(rBody, rOption)

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

rBody − 它表示一個物件，該物件定義響應的主體。其值可以為 null（預設值）或 blob、ArrayBuffer、TypedArray、DataView、FormData、String、URLSearchParams、字串字面量或 ReadableStream。
Options − 它是一個物件，用於提供我們想要應用於響應的自定義設定，選項包括：
headers − 用於向響應新增標頭。預設情況下，此引數的值為空。其值可以是 Header 物件或字串的物件字面量。
status − 此引數表示響應的狀態碼。其預設值為 200。
statusText − 此引數表示與狀態碼相關的狀態訊息，例如“未找到”。其預設值為 ""。

示例

在下面的程式中，我們使用 fetch() 函式從給定的 URL 獲取資料，然後以 JSON 格式顯示響應資料。

<!DOCTYPE html>
<html>
<body>
<script>
   // Data
   const option = {message: "Hello Tom. How are you?"};
   
   // creating header object
   const newResponse = new Response(JSON.stringify(option), {
      status: 200,
      statusText:" Receive data successfully"
   });
   // Displaying response
   console.log(newResponse)
</script>
   <h2>Fetch API Example</h2>
   <div>
      <!-- Displaying retrieved data-->
      <p id="sendData"></p>
   </div>
</body>
</html>

輸出

例項屬性

Response 介面提供的屬性是隻讀屬性。因此，常用的屬性包括：

序號	屬性及描述
1	Response.body 此屬性包含 ReadableStream 主體內容。
2	Response.ok 此屬性檢查響應是否成功。此屬性的值為布林值。
3	Response.bodyUsed 此屬性用於檢查響應中是否使用了主體。其值為布林值。
4	Response.redirected 此屬性用於檢查響應是否是重定向的結果。其值為布林值。
5	Response.status 此屬性包含響應的狀態碼。
6	Response.statusText 此屬性根據狀態碼提供狀態訊息。
7	Response.type 此屬性提供響應的型別。
8	Response.url 此屬性提供響應的 URL。
9	Response.header 此屬性提供給定響應的 Header 物件。

示例

在下面的程式中，我們使用 Response 介面提供的屬性。

<!DOCTYPE html>
<html>
<body>
   <h2>Fetch API Example</h2>
<script>
   // GET request using fetch()function
   fetch("https://jsonplaceholder.typicode.com/todos")
   .then(response => {
   // Finding response URL
   console.log("URL is: ", response.url);

   // Getting response text
   console.log("Status Text: ", response.statusText);

   // Getting response status
   console.log("Status Code: ", response.status);
   }).catch(err =>{
      // Handling error
      console.log("Found Error:", err);
   });
</script>
</body>
</html>

輸出

方法

以下是 Response 介面常用的方法：

序號	方法及描述
1	Request.arrayBuffer() 此方法用於返回一個 promise，該 promise 將解析為響應主體的 ArrayBuffer 表示形式。
2	Request.blob() 此方法用於返回一個 promise，該 promise 將解析為響應主體的 Blob 表示形式。
3	Request.clone() 此方法用於建立當前響應物件的副本。
4	Request.json() 此方法用於將響應主體解析為 JSON，並返回一個 promise，該 promise 將解析為解析結果。
5	Request.text() 此方法用於返回一個 promise，該 promise 將解析為響應主體的文字表示形式。
6	Request.formData() 此方法用於返回一個 promise，該 promise 將解析為響應主體的 FormData 表示形式。
7	Response.error() 此方法返回一個與網路錯誤相關的新的 Response 物件。這是一個靜態方法。
8	Response.redirect 此方法返回一個具有不同 URL 的新的 Response 物件。這是一個靜態方法。
9	Response.json() 此方法返回一個用於返回 JSON 編碼資料的新的 Response 物件。這是一個靜態方法。

示例

在下面的程式中，我們使用 Response 介面提供的方法。因此，我們將使用 json() 函式以 JSON 格式解析響應。

<!DOCTYPE html>
<html>
<body>
<script>
   // GET request using fetch()function
   fetch("https://jsonplaceholder.typicode.com/todos/2", {
   // Method Type
   method: "GET"}) 

   // Parsing the response data into JSON
   // Using json() function
   .then(response => response.json())
   .then(myData => {
      // Display output
      document.getElementById("manager").innerHTML = JSON.stringify(myData);
   }).catch(newError =>{
      // Handling error
      console.log("Found Error:", newError)
   });
</script>
   <h2>Display Data</h2>
   <div>
      <!-- Displaying retrevie data-->
      <table id = "manager"></table>
   </div>
</body>
</html>

輸出

結論

這就是 Response 介面與 Fetch API 的工作方式。使用 Response 介面，我們可以提取和處理伺服器提供的響應。它還提供各種方法和屬性來提取和處理響應。在下一篇文章中，我們將學習 Fetch API 中的主體資料。

列印頁面