Fetch API - 发送 PUT 请求

在 Fetch API 中，PUT 请求用于更新或替换服务器上存在的现有资源或数据。 使用 PUT 请求通常在请求正文中包含要更新的数据。 当服务器收到请求时，服务器使用该数据来更新给定 URL 中存在的现有资源。 如果服务器不包含该资源，那么它会使用给定的数据创建一个新资源。

语法

fetch(URL, {
   method: "PUT",
   body: {//JSON Data},
   headers:{"content-type": "application/json; charset=UTF-8"}})
.then(info =>{
   // Code
})
.catch(error =>{
   // catch error
});

这里的 fetch() 函数包含以下参数 −

• URL − 它代表我们要获取的资源。

• method − 它是一个可选参数。 它用于表示请求，如 GET、POST、DELETE 和 PUT。

• body − 它也是一个可选参数。 当您想要向请求添加正文时，可以使用此参数。

• headers − 它也是一个可选参数。 它用于指定标头。

示例 1:使用 fetch() 发送 PUT 请求

在下面的程序中，我们创建一个简单的脚本，通过使用 fetch() 函数的 PUT 请求来更新给定 URL 中的现有数据。 在这里，我们在给定的 URL 中发送一个 JSON 文档以及标头。 所以收到响应后，检查响应的状态。 如果响应状态为200，则表示数据更新成功。 如果发生错误，则 catch 函数会处理该错误。

<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
</head>
<body>
<h1>Example of Fetch API</h1>
<script>
   // 使用 PUT 请求更新 URL 中的数据
   fetch("https://jsonplaceholder.typicode.com/todos/21", {
      // Using PUT request
      method: "PUT",

      // Body contains replacement data 
      body: JSON.stringify({
         id: 22,
         title: "Hello! Mohina what are you doing?",
      }),
      // Setting headers
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   .then(response => {
      // Handle response
      if (response.status == 200){
         console.log("Data updated successfully")
      } else {
         throw new error("Error Found:", response.status)
      }
   })
   // Handle error
   .catch(err=>{
      console.error(err)
   });
</script>
</body>
</html>

Output

示例 2:使用带有 async/await 的 fetch() 发送 PUT 请求

在下面的程序中，我们创建一个脚本，使用带有 fetch() 函数和 async/await 的 PUT 请求来更新给定 URL 中的现有数据。 在这里，我们在给定的 URL 中发送一个 JSON 文档以及标头。 所以我们创建一个名为modifyData()的异步函数。 这里我们使用await关键字和fetch()函数来暂停函数的执行，直到返回的promise被解析。 收到响应后，检查响应的状态，如果响应状态为200，则表示数据更新成功。 如果发生错误，则 catch 函数会处理该错误。

注意 − 这里async/await一起使用，以同步的方式处理异步操作。

<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
</head>
<body>
<h1>Example of Fetch API</h1>
<script>
   async function modifyData(){
      try{
         const myRes = await fetch("https://jsonplaceholder.typicode.com/todos/21", {
            // Using PUT request
            method: "PUT",

            // Body contains replacement data 
            body: JSON.stringify({
               id: 24,
               title: "Mina leaves in Delhi",
            })
         });
         // Handling response
         if (myRes.status == 200){
            console.log("Data updated successfully")
         } else {
            throw new error("Error Found:", myRess.status)
         }
      } catch(err){
         console.error(err)
      }
   }
   // Calling the function
   modifyData();
</script>
</body>
</html>

输出

结论

这就是我们如何使用 PUT 请求来更新给定资源中的现有数据。 使用此功能，您还可以借助 fetch() 函数提供的参数向请求添加额外的属性。 在下一章中，我们将看到如何发送 JSON 数据。