CodeGym /Cursos /Frontend SELF ES /Operaciones CRUD

Operaciones CRUD

Frontend SELF ES
Nivel 44 , Lección 1
Disponible

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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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:

  1. Manejo de errores: siempre maneja posibles errores al realizar solicitudes HTTP. Usa bloques try...catch o métodos catch para manejar errores.
  2. Validación de datos: antes de enviar datos al servidor, asegúrate de que cumplen con el formato esperado.
  3. 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.
  4. Paginación y filtrado: al obtener grandes volúmenes de datos, usa parámetros de solicitud para paginar y filtrar datos.
  5. Cacheo: para mejorar el rendimiento, puedes cachear datos que se solicitan con frecuencia.
Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION