Fetch API - 自定义请求对象

在 Fetch API 中，我们还可以使用 Request 接口的 help Request（）构造函数创建自定义 Request 对象。Request 接口为我们提供了对 HTTP 请求的更多控制和灵活性。它提供了各种选项，如 URL、方法、正文、标头等，可帮助我们创建自定义的 HTTP 请求。在创建自定义请求对象之前，我们首先了解 Request（）构造函数，我们可以使用它来创建 Request 对象。

Request（）构造函数

要创建一个请求对象，我们可以使用 Request（）构造函数和一个 new 关键字。此构造函数包含一个必需参数，该参数是资源的 URL，另一个参数是可选的。

语法


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 − 它表示要用于请求的凭证。此参数的默认值为 same-origin，但您也可以根据需要使用 omit、same-origin 或 include 等值。
cache − 它表示请求所需的缓存模式。
redirect − 它用于重定向模式。此参数的值可以是：follow、error 或 manual。默认情况下，为 follow value 设置参数。
referrer — 它表示一个字符串，用于指定请求的 referrer。此参数的可能值为 client、URL 或 no-referrer。此参数的默认值是关于客户端的。
referrerPolicy - 它用于指定反向链接策略。
integrity - 它用于表示给定请求的子资源完整性值。
keepalive − 它包含一个布尔值，用于确定是否为多个请求/响应创建持久连接。
signal - 它包含一个 AbortSignal 对象，用于与请求通信或中止请求。
priority − 它用于指定与其他请求相比请求的优先级。此参数可以具有以下任何一个值 -
high − 如果我们想将当前 fetch 请求的优先级设置为高，与其他请求相比。
low − 如果我们想将当前 fetch 请求的优先级设置为与其他请求相比较低。
auto − 自动查找当前 fetch 请求与其他请求的优先级。

自定义请求对象

要创建自定义请求对象，我们需要按照以下步骤操作 -

第 1 步 - 自定义 Request 选项


optional ={
	 	method: "POST",
	 	headers: {"Content-Type": "application/json"},
	 	body = {
	 	 	 Name: "Tom",
	 	Age: 23}
};

第 2 步 - 使用 Request（）构造函数创建自定义请求对象。


 const newRequest = new Request(resourceURL, optional

第 3 步 - 使用 fetch（）函数获取请求对象。


fetch(newRequest)
.then(response =>{
	 	// Handling the response
}).catch(err => {
	 	// Handle error
})

例

在下面的程序中，我们创建一个脚本，以使用自定义 Request 对象发送数据。为此，我们使用 Request（）构造函数创建自定义请求对象，该构造函数采用两个参数：URL（资源 URL）和可选参数。其中 optional 参数包含请求的自定义设置，它们是 -

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>

输出

自定义请求对象

结论

这就是我们如何在 Request 接口的帮助下创建自定义请求对象。这个接口提供了各种属性和方法，可以根据我们的需求来修改请求体。现在在下一篇文章中，我们将学习如何使用 fetch API 上传文件。

打印本页

Fetch API - 自定义请求对象

Request（） 构造函数

语法

自定义请求对象

结论

Request（）构造函数