Skip to content

GitLab

Modulo 4 · Changes

Page history
cambios en asincronía y uso de api authored by imunnic's avatar imunnic
Hide whitespace changes
Inline Side-by-side
Showing with 24 additions and 9 deletions
Modulo-4.md
View page @ 818a8a9d
......@@ -15,18 +15,33 @@ setTimeout((): void => {
console.log('Datos recibidos del servidor');
}, 2000);
console.log('Petición enviada');
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 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:
```ts
console.log('Iniciando petición...');
async function getDatos(): Promise<void> {
console.log('Iniciando petición...');
await retraso();
console.log('Datos recibidos del servidor');
console.log('Petición enviada');
}
getDatos();
```
---
## 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 sanitaria, una API REST expone recursos como **personal, material, activaciones o inventario**.
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**.
Las API REST intercambian datos en **formato JSON**, fácilmente mapeables a **interfaces TypeScript**. Por qué
---
......@@ -71,7 +86,7 @@ const obj: RecursoDTO = JSON.parse(json);
```ts
async function obtenerRecursos(): Promise<RecursoDTO[]> {
const respuesta = await fetch('https://api.panacea.com/recursos');
const respuesta = await fetch('http://localhost:8080/panacea/rest/recursos');
if (!respuesta.ok) {
throw new Error(`Error HTTP: ${respuesta.status}`);
......@@ -98,7 +113,7 @@ obtenerRecursos()
```ts
async function cargarRecursos(): Promise<void> {
try {
const respuesta = await fetch('https://api.panacea.com/recursos');
const respuesta = await fetch('http://localhost:8080/panacea/rest/recursos');
const datos: RecursoDTO[] = await respuesta.json();
console.table(datos);
} catch (error) {
......@@ -115,7 +130,7 @@ cargarRecursos();
```ts
async function agregarRecurso(nuevo: RecursoDTO): Promise<RecursoDTO> {
const respuesta = await fetch('https://api.panacea.com/recursos', {
const respuesta = await fetch('http://localhost:8080/panacea/rest/recursos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(nuevo),
......@@ -145,7 +160,7 @@ agregarRecurso({
```ts
async function actualizarRecurso(id: string, datos: Partial<RecursoDTO>): Promise<void> {
await fetch(`https://api.panacea.com/recursos/${id}`, {
await fetch(`http://localhost:8080/panacea/rest/recursos/${id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(datos),
......@@ -157,7 +172,7 @@ async function actualizarRecurso(id: string, datos: Partial<RecursoDTO>): Promis
```ts
async function eliminarRecurso(id: string): Promise<void> {
await fetch(`https://api.panacea.com/recursos/${id}`, {
await fetch(`http://localhost:8080/panacea/rest/recursos/${id}`, {
method: 'DELETE',
});
console.log('Recurso eliminado correctamente');
......