HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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)

The Request() constructor has the following parameters −

  • resourceURL − 它代表我们要获取的资源。 它可以是资源的 URL 或 Request 对象。

  • optional − 它是一个用于提供我们想要根据请求应用的自定义设置的对象，选项是 −

  • method − 表示GET、POST、PUT、DELETE等请求方法。

  • headers − 它用于向您的请求添加标头。

  • body − 它用于向您的请求添加数据。 GET 或 HEAD 方法不使用它。

  • mode − 它代表您要用于请求的模式。 该参数的值可以是cors、same-origin、no-cors或navigate。 默认情况下，mode 参数的值为 cors。

  • credentials − 它代表您要用于请求的凭据。 该参数的默认值是同源，但您也可以根据需要使用省略、同源或包含等值。

  • cache − 它代表您的请求所需的缓存模式。

  • redirect − 它用于重定向模式。 该参数的值可以是：follow、error、manual。 默认情况下，参数设置为跟随值。

  • referrer − 它代表一个字符串，指定请求的引用者。 此参数的可能值是客户端、URL 或无引用者。 该参数的默认值与客户端有关。

  • referrerPolicy − 用于指定Referrer策略。

  • integrity − 它用于表示给定请求的子资源完整性值。

  • keepalive − 它包含一个布尔值来确定是否为多个请求/响应创建持久连接。

  • signal − 它包含一个 AbortSignal 对象，用于与请求通信或中止请求。

  • priority − 它用于指定该请求相对于其他请求的优先级。 该参数可以是以下任意一个值 −

  • high − 如果我们想将当前获取请求的优先级设置为比其他请求更高。

  • low − 如果我们想将当前提取请求的优先级设置为比其他请求低。

  • auto − 自动查找当前提取请求与其他请求相比的优先级。

自定义请求对象

要创建自定义请求对象，我们需要执行以下步骤 −

步骤 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() 构造函数创建一个自定义请求对象，该构造函数采用两个参数：URL（资源 URL）和可选参数。 其中可选参数包含请求的自定义设置，它们是 −

  • method − 这里我们使用POST方法，它代表我们正在向服务器发送数据。

  • body − 包含我们要发送的数据。

  • headers − 它表明该数据是 JSON 数据。

现在我们在 fetch() 函数中传递 request 对象来发送请求并处理服务器返回的响应，并在发生错误时进行处理。

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

❮ 上一节 下一节 ❯