Ajax 简明教程
Fetch API - Send PUT Requests
在获取 API 中，PUT 请求用于更新或替换服务器上的现有资源或数据。使用 PUT 请求通常包含你要在请求主体中更新的数据。当服务器收到请求时，服务器使用该数据更新给定 URL 中存在的现有资源。如果服务器不包含该资源，则它将使用给定数据创建新资源。
Syntax
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 − 它也是一个可选参数。用于指定标头。
Example 1: Sending PUT Request Using fetch()
在下面的程序中，我们创建一个简单的脚本，以使用 PUT 请求通过 fetch() 函数更新给定 URL 中的现有数据。在这里，我们连同标题一起在给定 URL 中发送 JSON 文档。因此在收到响应后，检查响应的状态。如果响应状态为 200，则表示数据已成功更新。如果发生错误，则 catch 函数处理该错误。
<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
</head>
<body>
<h1>Example of Fetch API</h1>
<script>
// Update data in the URL using the PUT request
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>
Example 2: Sending PUT Request Using fetch() with async/await
在下面的程序中，我们创建一个脚本，以通过 fetch() 函数和 async/await 使用 PUT 请求更新给定 URL 中的现有数据。在这里，我们连同标题一起在给定 URL 中发送 JSON 文档。因此，我们创建一个名为 modifyData() 的异步函数。在此处，我们将 await 关键字与 fetch() 函数一起使用，以暂停函数的执行，直到返回的承诺得到解决。收到响应后，检查响应的状态，如果响应状态为 200，则表示数据已成功更新。如果发生错误，则 catch 函数处理该错误。
Note − 在此处，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>