6.1 Introdução ao CRUD
CRUD é um acrônimo que representa quatro operações principais que podem ser realizadas com dados: criação (Create), leitura (Read), atualização (Update) e exclusão (Delete). Essas operações são fundamentais para trabalhar com bancos de dados e são a base da maioria dos aplicativos web.
O que é CRUD?
- Create (Criação): a operação de criação é usada para adicionar novos registros ao banco de dados. Isso permite introduzir novos dados no sistema.
- Read (Leitura): a operação de leitura é usada para extrair dados do banco de dados. Isso permite que os usuários façam consultas e visualizem informações existentes.
- Update (Atualização): a operação de atualização é usada para alterar registros existentes no banco de dados. Isso permite editar e corrigir dados.
- Delete (Exclusão): a operação de exclusão é usada para remover registros do banco de dados. Isso permite excluir dados desnecessários ou desatualizados.
Métodos HTTP para operações CRUD
No contexto do desenvolvimento web, as operações CRUD são frequentemente executadas usando requisições HTTP para uma API. Diferentes métodos HTTP correspondem a diferentes operações CRUD:
- POST: usado para criar novos recursos.
- GET: usado para ler (obter) recursos.
- PUT e PATCH: usados para atualizar recursos existentes. PUT geralmente é usado para substituir completamente um recurso, enquanto PATCH é para uma atualização parcial.
- DELETE: usado para excluir recursos.
Por que precisamos de operações CRUD?
As operações CRUD são a base para o trabalho com dados em aplicativos web. Elas permitem aos desenvolvedores implementar funcionalidades básicas, como criar contas de usuário, editar perfis, visualizar dados e excluir registros. Essas operações também garantem a interação entre o cliente e o servidor, permitindo a transmissão de dados e comandos.
Ferramentas modernas para realizar operações CRUD
Os aplicativos web modernos frequentemente usam várias ferramentas e bibliotecas para realizar operações CRUD por meio de uma API:
- Fetch API: maneira integrada no navegador para realizar requisições HTTP, baseada em promises.
- Axios: biblioteca popular para realizar requisições HTTP, oferecendo uma API conveniente e avançada.
Essas ferramentas ajudam os desenvolvedores a executar operações CRUD de maneira fácil e eficiente, oferecendo flexibilidade e facilidade de integração com várias APIs do lado do servidor.
6.2 Usando Fetch
Vamos explorar o uso do Fetch para realizar operações CRUD.
Criação (Create):
const createData = async (data) => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('Created:', result);
};
createData({ title: 'foo', body: 'bar', userId: 1 });
Leitura (Read):
const readData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const result = await response.json();
console.log('Read:', result);
};
readData(1);
Atualização (Update):
const updateData = async (id, data) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('Updated:', result);
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
Exclusão (Delete):
const deleteData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'DELETE'
});
if (response.ok) {
console.log('Deleted:', id);
} else {
console.error('Failed to delete:', id);
}
};
deleteData(1);
6.3 Usando Axios
Vamos explorar o uso do Axios para realizar operações CRUD.
Criação (Create):
const axios = require('axios');
const createData = async (data) => {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', data);
console.log('Created:', response.data);
} catch (error) {
console.error('Error creating data:', error);
}
};
createData({ title: 'foo', body: 'bar', userId: 1 });
Leitura (Read):
const readData = async (id) => {
try {
const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);
console.log('Read:', response.data);
} catch (error) {
console.error('Error reading data:', error);
}
};
readData(1);
Atualização (Update):
const updateData = async (id, data) => {
try {
const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, data);
console.log('Updated:', response.data);
} catch (error) {
console.error('Error updating data:', error);
}
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
Exclusão (Delete):
const deleteData = async (id) => {
try {
const response = await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (response.status === 200) {
console.log('Deleted:', id);
}
} catch (error) {
console.error('Error deleting data:', error);
}
};
deleteData(1);
6.4 Dicas para usar CRUD
Dicas para usar operações CRUD por meio de uma API:
- Tratamento de erros: sempre trate possíveis erros ao realizar requisições HTTP. Use blocos
try...catch
ou métodoscatch
para o tratamento de erros. - Validação de dados: antes de enviar dados para o servidor, certifique-se de que eles estejam no formato esperado.
- Autenticação e autorização: ao trabalhar com recursos protegidos, certifique-se de lidar corretamente com autenticação e autorização, por exemplo, adicionando tokens de acesso nos cabeçalhos das requisições.
- Paginação e filtragem: ao recuperar grandes volumes de dados, use parâmetros de consulta para paginação e filtragem dos dados.
- Cache: para melhorar o desempenho, você pode fazer cache de dados frequentemente solicitados.
GO TO FULL VERSION