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 中的主体数据。

打印页面