Ajax 简明教程
Fetch API - Response
Fetch API 提供了一个特殊的接口来创建对请求的响应，并且该接口的名称是响应。此接口提供了一个 Response() 构造函数来创建一个响应对象。它提供各种方法和属性来访问和处理响应数据。
Syntax
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 − 此参数表示与状态码相关的状态消息，例如“未找到”。它的默认值是“”。
Example
在以下程序中，我们使用 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>
Instance Properties
Response 接口提供的属性是只读属性。因此，常用属性如下：
Sr.No. |
Property & Description |
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 此属性提供给定响应的标头对象。 |
Example
在下面的程序中，我们使用 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>
Methods
以下是 Response 接口常用的方法 −
Sr.No. |
Method & Description |
1 |
Request.arrayBuffer() 此方法用于返回一个承诺，该承诺将使用响应体的 ArrayBuffer 表示形式进行解析。 |
2 |
Request.blob() 此方法用于返回一个承诺，该承诺将使用响应体的 blob 表示形式进行解析。 |
3 |
Request.clone() 此方法用于创建当前响应对象的副本。 |
4 |
Request.json() 此方法用于将响应体解析为 JSON 并返回一个承诺，该承诺将使用解析的结果进行解析。 |
5 |
Request.text() 此方法用于返回一个承诺，该承诺将使用响应体的文本表示形式进行解析。 |
6 |
Request.formData() 此方法用于返回一个承诺，该承诺将使用响应体的 FormData 表示形式进行解析。 |
7 |
Response.error() 此方法返回一个与网络错误相关的新 Response 对象。它是一个静态方法。 |
8 |
Response.redirect 此方法返回一个具有不同 URL 的新 Response 对象。它是一个静态方法。 |
9 |
Response.json() 此方法返回一个用于返回 JSON 编码数据的新 Response 对象。它是一个静态方法。 |
Example
在下面的程序中，我们使用 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>