Ajax 简明教程
Fetch API - Custom Request Object
在 Fetch API 中，我们还可以借助 Request 接口的 Request() 构造函数创建自定义 Request 对象。Request 接口为我们提供了对 HTTP 请求的更多控制和灵活性。它提供了多种选项，如 URL、方法、主体、标头等，帮助我们创建定制的 HTTP 请求。在创建自定义请求对象之前，我们首先了解 Request() 构造函数，我们可以使用它来创建 Request 对象。
Request() Constructor
为了创建一个请求对象，我们可以使用 Request() 构造函数以及一个 new 关键字。该构造函数包含一个必需参数，即资源的 URL，另一个参数是可选的。
Syntax
const newRequest = New Request(resourceURL)
Or
const newRequest = New Request(resourceURL, optional)Request() 构造函数具有以下参数 −
-
resourceURL − 它表示我们要获取的资源。它可以是资源的 URL 或 Request 对象。
-
Options - 它是一个用于提供希望在请求中应用的自定义设置的对象，选项如下 -
-
method - 它表示请求方法，例如 GET、POST、PUT 和 DELETE。
-
headers - 它用于向您的请求添加 header。
-
body - 它用于向您的请求添加数据。GET 或 HEAD 方法不使用它。
-
mode - 它表示希望用于请求的模式。此参数的值可以是 cors、same-origin、no-cors 或 navigate。默认情况下，mode 参数的值为 cors。
-
credentials - 它表示希望在请求中使用的认证信息。此参数的默认值是 same-origin，但还可以根据需要使用 omit、same-origin 或 include 等值。
-
cache - 它代表你希望请求的缓存模式。
-
redirect - 它用于重定向模式。此参数的值可以是：follow、error 或 manual。默认情况下，此参数设置为 follow 值。
-
referrer - 它表示指定请求引荐来源的字符串。此参数的可能值为 client、URL 或 no-referrer。此参数的默认值为 client。
-
referrerPolicy - 它用于指定引荐来源策略。
-
integrity - 它用于表示给定请求的子资源完整性值。
-
keepalive - 它包含一个布尔值，以确定是否为多个请求/响应创建持久连接。
-
signal - 它包含一个 AbortSignal 对象，用于与请求通信或取消请求。
-
priority - 它用于指定请求与其他请求相比的优先级。此参数可以具有以下任何一个值 -
-
high - 如果希望将当前获取请求的优先级设置为高于其他请求。
-
low - 如果希望将当前获取请求的优先级设置为低于其他请求。
-
auto - 自动查找当前获取请求的优先级，高于其他请求。
Custom Request object
要创建一个自定义请求对象，我们需要执行以下步骤 -
Step 1 - 自定义 Request 选项
optional ={
method: "POST",
headers: {"Content-Type": "application/json"},
body = {
Name: "Tom",
Age: 23}
};Step 2 - 使用 Request() 构造函数创建一个自定义请求对象。
const newRequest = new Request(resourceURL, optionalStep 3 - 使用 fetch() 函数获取请求对象。
fetch(newRequest)
.then(response =>{
// Handling the response
}).catch(err => {
// Handle error
})Example
在以下程序中，我们创建了一个使用自定义 Request 对象发送数据的脚本。因此，为此，我们使用 Request() 构造函数创建了一个自定义请求对象，它接受两个参数：URL（资源 URL）和可选参数。其中可选参数包含请求的自定义设置，它们是 -
-
method - 此处我们使用 POST 方法，表示我们正在向服务器发送数据。
-
body - 包含我们想要发送的数据。
-
headers - 它表示该数据是 JSON 数据。
现在我们在`fetch()`函数中传递请求对象以发送请求并处理服务器返回的响应，如果发生错误，则处理该错误。
<!DOCTYPE html>
<html>
<body>
<script>
// Customize setting of the request
const optional = {
// Setting POST request
method: "POST",
// Add body which contains data
body: JSON.stringify({
id: 311,
title: "Tom like Oranges",
age: 37
}),
// Setting header
headers:{"Content-type": "application/json; charset=UTF-8"}
};
// Creating request object
const newRequest = new Request("https://jsonplaceholder.typicode.com/todos", optional);
fetch(newRequest)
// Handling response
.then(response => response.json())
.then(returnData => {
console.log("Data Sent Successfully");
// Display output
document.getElementById("sendData").innerHTML = JSON.stringify(returnData);
})
// 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>