6.1 Introducción a CRUD
CRUD — es un acrónimo que describe cuatro operaciones básicas que se pueden realizar con los datos: crear (Create), leer (Read), actualizar (Update) y borrar (Delete). Estas operaciones son fundamentales para trabajar con bases de datos y son la base de la mayoría de las aplicaciones web.
¿Qué es CRUD?
- Create (Crear): esta operación se usa para añadir nuevos registros en la base de datos. Permite introducir nuevos datos en el sistema.
- Read (Leer): esta operación se usa para extraer datos de la base de datos. Permite a los usuarios solicitar y ver información existente.
- Update (Actualizar): esta operación se usa para modificar registros existentes en la base de datos. Permite editar y corregir datos.
- Delete (Borrar): esta operación se usa para eliminar registros de la base de datos. Permite borrar datos innecesarios o desactualizados.
Métodos HTTP para operaciones CRUD
En el contexto del desarrollo web, las operaciones CRUD a menudo se realizan usando solicitudes HTTP a un API. Diferentes métodos HTTP corresponden a diversas operaciones CRUD:
- POST: se usa para crear nuevos recursos.
- GET: se usa para leer (obtener) recursos.
- PUT y PATCH: se usan para actualizar recursos existentes. PUT se usa generalmente para reemplazar un recurso por completo, mientras que PATCH — para actualizaciones parciales.
- DELETE: se usa para borrar recursos.
¿Por qué son necesarias las operaciones CRUD?
Las operaciones CRUD son la base para trabajar con datos en aplicaciones web. Permiten a los desarrolladores implementar funcionalidades básicas como crear cuentas de usuario, editar perfiles, ver datos y eliminar registros. Estas operaciones también aseguran la interacción entre el cliente y el servidor, permitiendo transferir datos y comandos.
Herramientas modernas para realizar operaciones CRUD
Las aplicaciones web modernas a menudo utilizan varias herramientas y bibliotecas para realizar operaciones CRUD a través de APIs:
- Fetch API: forma integrada en el navegador para realizar solicitudes HTTP, basada en promesas.
- Axios: biblioteca popular para realizar solicitudes HTTP, proporcionando un API práctico y avanzado.
Estas herramientas ayudan a los desarrolladores a realizar operaciones CRUD de manera fácil y eficiente, proporcionando flexibilidad y simplicidad en la integración con diversas APIs de servidor.
6.2 Uso de Fetch
Veamos el uso de Fetch para realizar operaciones CRUD.
Creación (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 });
Lectura (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);
Actualización (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 });
Eliminación (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 Uso de Axios
Veamos el uso de Axios para realizar operaciones CRUD.
Creación (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 creando datos:', error);
}
};
createData({ title: 'foo', body: 'bar', userId: 1 });
Lectura (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 leyendo datos:', error);
}
};
readData(1);
Actualización (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 actualizando datos:', error);
}
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
Eliminación (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 eliminando datos:', error);
}
};
deleteData(1);
6.4 Consejos para usar CRUD
Consejos para usar operaciones CRUD a través de APIs:
- Manejo de errores: siempre maneja posibles errores al realizar solicitudes HTTP. Usa bloques
try...catcho métodoscatchpara manejar errores. - Validación de datos: antes de enviar datos al servidor, asegúrate de que cumplen con el formato esperado.
- Autenticación y autorización: al trabajar con recursos protegidos, asegúrate de manejar correctamente la autenticación y autorización, por ejemplo, añadiendo tokens de acceso en los encabezados de solicitudes.
- Paginación y filtrado: al obtener grandes volúmenes de datos, usa parámetros de solicitud para paginar y filtrar datos.
- Cacheo: para mejorar el rendimiento, puedes cachear datos que se solicitan con frecuencia.
GO TO FULL VERSION