Modulo 4

Módulo 4 — Uso de Servicios y API REST en TypeScript

1. Introducción a la asincronía

TypeScript hereda el modelo asíncrono y no bloqueante de JavaScript, pero añade tipado estático que permite detectar errores en el manejo de promesas y datos remotos antes de ejecutar la aplicación.

console.log('Iniciando petición...');

setTimeout((): void => {
  console.log('Datos recibidos del servidor');
}, 2000);

console.log('Fin de la petición');

El flujo principal no se bloquea; la operación asíncrona se gestiona mediante el Event Loop. El Event Loop es el mecanismo que permite a Javascript (Typescript por herencia) ejecutar codigo en paralelo. Podría decirse que es un organizador de tareas o hilos.
Si se quisiera esperar a recibir los datos lo que habría que hacer es:

console.log('Iniciando petición...');

async function retraso(): Promise<string> {
  return new Promise((resolve) => {
    console.log('Cargando Datos');
    setTimeout(() => { 
      resolve('Datos cargados');
    }, 1500);
  }
  );
}

async function ejecutar() {
  let respuesta = await retraso();
  console.log(respuesta);
  console.log('Fin de la petición');
}

ejecutar();

2. Qué es una API REST

Una API REST (Representational State Transfer) permite la comunicación entre aplicaciones a través de HTTP. En una aplicación de gestión de recursos, una API REST expone recursos como recursos, solicitudes o activaciones.

Las API REST intercambian datos en formato JSON, fácilmente mapeables a interfaces TypeScript. Por qué se usan interfaces en lugar de clases tiene que ver con la respuesta de la API. Las API, como se ha mencionado anteriormente, no devuleve objetos, aunque lo que devuelva sea una notación de los mismos. Por eso, de cara a la flexibilidad, es mejor registrarlos como interface y no como objetos.

3. Métodos HTTP más comunes

Los métodos HTTP son las herramientas que se disponen desde la API para poder realizar el CRUD(Create, Read, Update, Delete) en la base de datos desde un frontal web. Dependiendo de cómo se haya creado la API, estos métodos estarán permitidos o no, requerirán autenticación o no o incluso podrán no existir. Cada uno de estos métodos se puede realizar sobre una ruta concreta o endpoint como http://localhost:8080/panacea/rest/recursos.

Los más comunes son:

Método	Acción	Ejemplo en la aplicación
GET	Obtener información	Consultar recursos
POST	Crear un recurso	Añadir personal
PUT	Actualizar completo	Editar recurso
PATCH	Actualizar parcial	Cambiar estado
DELETE	Eliminar	Dar de baja

4. Qué es JSON

JSON es el formato estándar de intercambio de datos. En TypeScript, el JSON recibido se transforma en objetos tipados. Es el formato por defecto en el que las API REST devuelven los objetos de la base de datos.

interface RecursoDTO {
  id: string;
  uco: string;
}

const recurso: RecursoDTO = {
  id: '1hd72h3kw8fhs7dh34',
  uco: 'JMAPER'
};

const json: string = JSON.stringify(recurso);
const obj: RecursoDTO = JSON.parse(json);

5. Peticiones HTTP con `fetch`

El método fetch es la forma de solicitar datos a una API REST desde el frontal web. El método devuelve una Promise<Response>. En TypeScript se tipa explícitamente la respuesta esperada. Esta Promise es un promesa de que en algún momento, tenga o no tenga éxito, va a llegar una respuesta.

async function obtenerRecursos(): Promise<RecursoDTO[]> {
  const respuesta = await fetch('http://localhost:8080/panacea/rest/recursos');

  if (!respuesta.ok) {
    throw new Error(`Error HTTP: ${respuesta.status}`);
  }

  return respuesta.json();
}

obtenerRecursos()
  .then((recursos) => {
    console.log('Recursos disponibles:', recursos);
  })
  .catch((error: Error) => {
    console.error('Error al obtener los datos:', error.message);
  });

6. Uso de `async` y `await`

async/await permite escribir código asíncrono con estructura secuencial, manteniendo el tipado.

async function cargarRecursos(): Promise<void> {
  try {
    const respuesta = await fetch('http://localhost:8080/panacea/rest/recursos');
    const datos: RecursoDTO[] = await respuesta.json();
    console.table(datos);
  } catch (error) {
    console.error('Error al cargar recursos', error);
  }
}

cargarRecursos();

7. Envío de datos (POST)

async function agregarRecurso(nuevo: RecursoDTO): Promise<RecursoDTO> {
  //En el caso de la API, el método POST no se permite sobre recursos, debe hacerse sobre recursosHumanos o recursosMateriales
  const respuesta = await fetch('http://localhost:8080/panacea/rest/recursos', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(nuevo),
  });

  if (!respuesta.ok) {
    throw new Error('Error al crear el recurso');
  }

  return respuesta.json();
}

agregarRecurso({
  id: '17d263hf84j6sh3h9sjd',
  uco: 'JMAPER',
  tipoRecurso: 'HUMANO',
}).then((resultado: RecursoDTO) => {
  console.log('Recurso agregado:', resultado);
});

8. Actualización y eliminación

PATCH (actualización parcial)

async function actualizarRecurso(id: string, datos: Partial<RecursoDTO>): Promise<void> {
  await fetch(`http://localhost:8080/panacea/rest/recursos/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(datos),
  });
}

DELETE (eliminación)

async function eliminarRecurso(id: string): Promise<void> {
  await fetch(`http://localhost:8080/panacea/rest/recursos/${id}`, {
    method: 'DELETE',
  });
  console.log('Recurso eliminado correctamente');
}

9. CORS (Cross-Origin Resource Sharing)

CORS es un mecanismo de seguridad del navegador. El servidor debe permitir explícitamente el origen del frontend para no tener problemas. Esto quiere decir que si, por ejemplo, el puerto desde el que se realizan las peticiones del frontal web (véase 5000, como es por defecto el de LiveServer), no se podrá tener acceso a la API REST y por tanto tampoco a los datos.

Access-Control-Allow-Origin: http://localhost:4200

En Angular, este aspecto se gestiona principalmente en el backend o mediante proxies de desarrollo.

10. Ejemplo práctico: mostrar recursos en la interfaz

<h2>Recursos disponibles</h2>
<ul id="lista"></ul>
<button id="btnCargar">Cargar recursos</button>

const btn = document.getElementById('btnCargar') as HTMLButtonElement;
const lista = document.getElementById('lista') as HTMLUListElement;

btn.addEventListener('click', async (): Promise<void> => {
  try {
    const recursos = await obtenerRecursos();
    lista.innerHTML = '';

    recursos.forEach((r: RecursoDTO) => {
      const li = document.createElement('li');
      li.textContent = `${r.tipoRecurso}: ${r.uco}`;
      lista.appendChild(li);
    });
  } catch {
    alert('Error al cargar recursos');
  }
});

11. Buenas prácticas en TypeScript

Centralizar las llamadas HTTP en servicios.
Tipar siempre los datos entrantes y salientes.
Usar Partial<T> para actualizaciones.
Manejar errores HTTP explícitamente.