在 Fetch API 中，PUT 请求用于更新或替换服务器上存在的现有资源或数据。使用 PUT 请求通常在请求正文中包含要更新的数据。当服务器收到请求时，服务器将使用该数据来更新给定 URL 中存在的现有资源。如果服务器不包含资源，则它会使用给定的数据创建新资源。
语法
fetch(URL, {
method: "PUT",
body: {//JSON Data},
headers:{"content-type": "application/json; charset=UTF-8"}})
.then(info =>{
// 代码
})
.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 示例</title>
</head>
<body>
<h1>Fetch API示例</h1>
<script>
// 使用PUT请求更新URL中的数据
fetch("https://jsonplaceholder.typicode.com/todos/21", {
// 使用PUT请求
method: "PUT",
// 正文包含替换数据
body: JSON.stringify({
id: 22,
title: "Hello! Mohina what are you doing?",
}),
// 设置标题
headers:{"Content-type": "application/json; charset=UTF-8"}
})
.then(response => {
// 处理响应
if (response.status == 200){
console.log("数据更新成功")
} else {
throw new error("发现错误：", response.status)
}
})
// 处理错误
.catch(err=>{
console.error(err)
});
</script>
</body>
</html>
输出
示例 2：使用 fetch（） 和 async/await 发送 PUT 请求
在下面的程序中，我们创建一个脚本，使用带有 fetch（） 函数和 async/await 的 PUT 请求来更新给定 URL 中的现有数据。在这里，我们在给定的 URL 中发送一个 JSON 文档以及标头。因此，我们创建了一个名为 modifyData（） 的异步函数。这里我们使用 await 关键字和 fetch（） 函数来暂停函数的执行，直到返回的 promise 得到解决。收到响应后，如果响应状态为 200，则检查响应的状态，则表示数据更新成功。如果发生错误，则 catch 函数会处理该错误。
注意 − 这里 async/await 一起使用，以同步方式处理异步操作。
<!DOCTYPE html>
<html>
<head>
<title>Fetch API 示例</title>
</head>
<body>
<h1>Fetch API 示例</h1>
<script>
async function modifyData(){
try{
const myRes = await fetch("https://jsonplaceholder.typicode.com/todos/21", {
// 使用PUT请求
method: "PUT",
// 正文包含替换数据
body: JSON.stringify({
id: 24,
title: "Mina leaves in Delhi",
})
});
// 处理反应
if (myRes.status == 200){
console.log("数据更新成功")
} else {
throw new error("发现错误:", myRess.status)
}
} catch(err){
console.error(err)
}
}
// 调用函数
modifyData();
</script>
</body>
</html>
输出
结论
这就是我们如何使用 PUT 请求来更新给定资源中的现有数据。使用它，您还可以借助 fetch（） 函数提供的参数向请求添加额外的属性。现在在下一章中，我们将看到如何发送 JSON 数据。
