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 对象或 string 的对象文本。
  • status − 此参数表示响应的状态代码。其默认值为 200。
  • statusText − 此参数表示与状态代码相关的状态消息，如“Not Found”。其默认值为 “”。
例

在下面的程序中，我们使用 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>

输出

响应 2

实例属性

Response 接口提供的属性是只读属性。所以常用的属性是 -

属性 描述
Response.body

此属性包含 ReadableStream 正文内容。
Response.ok

此属性检查响应是否成功。此属性的值以 boolean 为单位。
Response.bodyUsed

此属性用于检查响应中是否使用了正文。其值为 boolean。
Response.redirected

此属性用于检查响应是否是重定向的结果。它的值以布尔值表示。
Response.status

此属性包含响应的状态代码。
Response.statusText

此属性根据状态代码提供状态消息。
Response.type

此属性提供响应的类型。
Response.url

此属性提供响应的 URL。
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 接口常用的方法 -

方法 描述
Request.arrayBuffer()

此方法用于返回一个 Promise，该 Promise 将使用响应体的 ArrayBuffer 表示进行解析。
Request.blob()

此方法用于返回一个 Promise，该 Promise 将使用响应正文的 Blob 表示进行解析。
Request.clone()

此方法用于创建当前响应对象的副本。
Request.json()

此方法用于将响应正文解析为 JSON 并返回一个 Promise，该 Promise 将使用解析结果进行解析。
Request.text()

此方法用于返回一个 Promise，该 Promise 将使用响应正文的文本表示形式进行解析。
Request.formData()

此方法用于返回一个 Promise，该 Promise 将使用响应正文的 FormData 表示进行解析。
Response.error()

此方法返回与网络错误相关的新 Response 对象。它是一种静态方法。
Response.redirect

此方法返回具有不同 URL 的新 Response 对象。它是一种静态方法。
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>

输出

响应 3

结论

这就是 Response 接口与 fetch API 一起工作的方式。使用 Response 接口，我们可以提取和处理服务器提供的响应。它还提供了用于提取和处理响应的各种方法和属性。现在在下一篇文章中，我们将了解 fetch API 中的 body 数据。

打印本页
上一页
下一页