This content originally appeared on DEV Community and was authored by Thiago Marinho
Para criar um CRUD (Create, Read, Update, Delete) usando a Fetch API do JavaScript, você pode seguir os seguintes passos:
1 - Crie uma função para fazer uma requisição GET para buscar os dados do servidor:
function getDados() {
fetch('url-do-servidor')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
}
2 - Crie uma função para enviar dados ao servidor usando uma requisição POST:
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 - Crie uma função para atualizar dados no servidor usando uma requisição 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 - Crie uma função para deletar dados no servidor usando uma requisição DELETE:
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 - Use as funções criadas para interagir com o servidor, por exemplo:
// 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)
Lembre-se de substituir "url-do-servidor" pela URL correta do seu servidor e adaptar as funções para atender às necessidades específicas do seu projeto.
Provavelmente você obterá um erro do browser relacionado ao CORS, se ocorrer utilize a biblioteca: https://github.com/expressjs/cors se o backend foi feito em Node.js, caso contrário busque outra solução.
This content originally appeared on DEV Community and was authored by Thiago Marinho
Thiago Marinho | Sciencx (2023-03-08T19:05:51+00:00) Como criar requisição de Crud Básico em Javascript usando Fetch API. Retrieved from https://www.scien.cx/2023/03/08/como-criar-requisicao-de-crud-basico-em-javascript-usando-fetch-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.