使用JavaScript fetch API创建一个CRUD(创建,读取,更新,删除),您可以按照以下步骤进行操作:
1-创建一个函数以提出获取服务器数据的请求:
function getDados() {
fetch('url-do-servidor')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
}
2-创建一个函数,使用帖子将数据发送到服务器:
function enviarDados(dados) {
fetch('url-do-servidor', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dados)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
}
3-创建一个函数以使用put:
在服务器上更新数据
function atualizarDados(id, dados) {
fetch(`url-do-servidor/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dados)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
}
4-创建一个函数,使用删除请求删除服务器上的数据:
function deletarDados(id) {
fetch(`url-do-servidor/${id}`, {
method: 'DELETE'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
}
5-使用创建的功能与服务器交互,例如:
// Busca os dados do servidor
getDados()
// Envia novos dados para o servidor
enviarDados({ nome: 'João', idade: 25 })
// Atualiza os dados do servidor com id = 1
atualizarDados(1, { nome: 'Maria', idade: 30 })
// Deleta os dados do servidor com id = 2
deletarDados(2)
记住用服务器的正确URL替换“ URL-Dor-Servidor”并调整功能以满足您项目的特定需求。
图像:Unsplash