Ajax 简明教程
Fetch API - Request
在 Fetch API 中，Request 接口用于创建资源请求。它是一种替代取回功能（fetch()）以外创建请求的方法。它还提供了我们可以应用于请求的各种属性和方法。因此，首先，我们将了解 Request() 构造函数，然后了解如何发送请求，然后了解 Request 接口提供的方法和属性。
Syntax
const newRequest = new Request(resourceURL)
Or
const newRequest = new Request(resourceURL, optional)Request() 构造函数具有以下参数 −
-
resourceURL − 我们想要提取的资源。它的值可以是资源 URL 或 Request 对象。
-
Options − 提供请求的附加设置的对象，定制选项如下：− method − 表示 GET、POST、PUT 和 DELETE 等请求方法。 headers − 向请求设置标头。 body − 向请求添加数据。此参数未使用 GET 或 HEAD 方法。 mode − 设置请求的模式，例如 cors、same-origin、no-cors 或 navigate。默认情况下，mode 参数的值为 cors。 credentials − 它设置您想要用于请求的凭据，例如 omit、same-origin 或 include。此参数的默认值为 same-origin。 cache − 设置您想要的请求的缓存模式。 redirect − 用于重定向模式，例如 follow、error 或 manual。默认情况下，该参数设置为 follow 值。 referrer − 表示请求参考者的字符串，例如 client、URL 或 no-referrer。此参数的默认值为有关客户端的信息。 referrerPolicy − 用于设置参考者策略。 integrity − 用于设置给定请求的子资源完整性值。 keepalive − 用于检查是否为多个请求/响应创建持久性连接。
-
signal* − 表示与请求通信或中止请求所用的 AbortSignal 对象。 priority − 用于将请求的优先级与其他请求进行比较。此参数的可能值为：
-
-
high − 将当前取回请求的优先级设置为高，高于其他请求。
-
low − 将当前取回请求的优先级设置为低，低于其他请求。
-
auto − 自动查找当前取回请求的优先级。
Send Request
要发送请求，我们必须首先使用 Request 构造函数创建 Request 对象，并带有附加参数，例如标头、正文、方法、资源 URL 等。然后将此对象传递给 fetch() 函数以向服务器发送请求。现在，fetch() 函数返回一个 promise，它将使用响应对象进行解决。如果遇到错误，则执行 catch 块。
Example
在下面的程序中，我们创建了一个使用 Request 对象发送数据的脚本。因此，为此，我们使用 Request() 构造函数创建了一个请求对象，以及以下参数：−
-
URL − 表示资源 URL。
-
method − 在此我们使用 POST 方法，表示我们正在向服务器发送数据。
-
body - 包含我们想要发送的数据。
-
header − 它表示数据是 JSON 数据。
现在我们在`fetch()`函数中传递请求对象以发送请求并处理服务器返回的响应，如果发生错误，则处理该错误。
<!DOCTYPE html>
<html>
<body>
<script>
// Creating request object
const myRequest = new Request("https://jsonplaceholder.typicode.com/todos", {
// Setting POST request
method: "POST",
// Add body which contains data
body: JSON.stringify({
id: 321,
title: "Kirti is a good girl",
}),
// Setting header
headers:{"Content-type": "application/json; charset=UTF-8"}
});
fetch(myRequest)
// Handling response
.then(response => response.json())
.then(myData => {
console.log("Data Sent Successfully");
// Display output
document.getElementById("sendData").innerHTML = JSON.stringify(myData);
})
// Handling error
.catch(err=>{
console.error("We get an error:", err);
});
</script>
<h2>Fetch API Example</h2>
<div>
<!-- Displaying retrieved data-->
<p id="sendData"></p>
</div>
</body>
</html>
Instance Properties
请求接口提供的属性是只读属性。常见的属性如下：
Sr.No. |
Property & Description |
1 |
Request.url 此属性包含给定请求的 URL。 |
2 |
Request.body 此属性包含给定请求的主体。 |
3 |
Request.bodyUsed 此属性用于告知请求中是否存在主体的内容。其值为布尔值。 |
4 |
Request.destination 此属性用于告知请求的目标。 |
5 |
Request.method 此属性包含请求方法，如 GET、POST、PUT 和 DELETE。 |
6 |
Request.headers 此属性包含请求的标头对象。 |
7 |
Request.cache 此属性包含给定请求的缓存模式。 |
8 |
Request.credentials 此属性包含给定请求的凭据。 |
9 |
Request.mode 此属性包含给定请求的模式。 |
Example
在以下程序中，我们使用 Request 接口提供的属性（如 url、method、header 和 mode）。
<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
</head>
<body>
<h1>Example of Fetch API</h1>
<script>
// Creating request object
const myRequest = new Request("https://jsonplaceholder.typicode.com/todos", {
// Setting POST request
method: "POST",
// Add body which contains data
body: JSON.stringify({
id: 321,
title: "Kirti is a good girl",
}),
// Setting header
headers:{"Content-type": "application/json; charset=UTF-8"},
mode: "cors"
});
// Display url of the request
console.log(myRequest.url);
// Display request method
console.log(myRequest.method);
// Display header of the request
console.log(myRequest.headers.get('content-Type'));
// Display mode of the request
console.log(myRequest.mode);
</script>
</body>
</html>
Methods
以下为 Request 接口中常用的方法：
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 表示来解决一个承诺。 |
Example
在以下程序中，我们使用 Request 接口提供的属性（如 blob、clone 等）。
<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
</head>
<body>
<h1>Example of Fetch API</h1>
<script>
// Creating request object
const myRequest = new Request("https://jsonplaceholder.typicode.com/todos");
// Using blob() method
myRequest.blob()
.then(data =>{
console.log(data)
});
// Creating a copy of the request using the clone() method
const duplicate = myRequest.clone();
console.log(duplicate);
</script>
</body>
</html>