HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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 − 该参数表示与状态代码相关的状态消息，例如"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>

输出

Response2

实例属性

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

Sr.No. 属性和描述
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接口的常用方法 −

Sr.No. 方法及说明
1

Request.arrayBuffer()

此方法用于返回一个promise ，该promise 将使用响应正文的 ArrayBuffer 表示形式进行解析。
2

Request.blob()

此方法用于返回一个promise ，该promise 将使用响应正文的 Blob 表示形式进行解析。

3

Request.clone()

该方法用于创建当前响应对象的副本。
4

Request.json()

此方法用于将响应正文解析为 JSON 并返回一个将解析结果的 Promise。
5

Request.text()

此方法用于返回一个promise ，该promise 将使用响应正文的文本表示形式进行解析。
6

Request.formData()

此方法用于返回一个promise ，该promise 将使用响应正文的 FormData 表示形式进行解析。

< /td>
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>

输出

Response3

结论

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

❮ 上一节 下一节 ❯