Fetch API - 自定义请求对象

在 Fetch API 中，我们也可以借助 Request 接口的 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 值。
referrer − 它表示一个字符串，指定请求的推荐来源。此参数的可能值为 client、URL 或 no-referrer。此参数的默认值与客户端有关。
referrerPolicy − 用于指定推荐来源策略。
integrity − 用于表示给定请求的子资源完整性值。
keepalive − 它包含一个布尔值，用于确定是否为多个请求/响应创建持久连接。
signal − 它包含一个 AbortSignal 对象，用于与请求通信或中止请求。
priority − 用于指定请求相对于其他请求的优先级。此参数可以具有以下值之一：
high − 如果我们想将当前 fetch 请求的优先级设置为高于其他请求。
low − 如果我们想将当前 fetch 请求的优先级设置为低于其他请求。
auto − 自动查找当前 fetch 请求相对于其他请求的优先级。

自定义请求对象

要创建自定义请求对象，我们需要遵循以下步骤：

步骤 1 − 自定义请求选项

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）和可选参数。可选参数包含请求的自定义设置，它们是：

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 上传文件。

打印页面