Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • E ECMAscript-Typescript
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 11
    • Issues 11
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Metrics
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • imunnic
  • ECMAscript-Typescript
  • Wiki
  • Modulo 4

Modulo 4 · Changes

Page history
actualizacion de ejemplos panacea authored Nov 19, 2025 by imunnic's avatar imunnic
Hide whitespace changes
Inline Side-by-side
Showing with 18 additions and 16 deletions
+18 -16
  • Modulo-4.md Modulo-4.md +18 -16
  • No files found.
Modulo-4.md
View page @ cd31b939
...@@ -53,18 +53,18 @@ Se basa en **pares clave–valor**, muy similar a los objetos literales de JavaS ...@@ -53,18 +53,18 @@ Se basa en **pares clave–valor**, muy similar a los objetos literales de JavaS
```javascript ```javascript
// Objeto literal // Objeto literal
const recurso = { const recurso = {
tipo: "Mascarillas", id: "1hd72h3kw8fhs7dh34",
cantidad: 300, unidad: "JMAPER",
disponible: true tipoRecurso: "HUMANO"
}; };
// Conversión a JSON // Conversión a JSON
const json = JSON.stringify(recurso); const json = JSON.stringify(recurso);
console.log(json); // '{"tipo":"Mascarillas","cantidad":300,"disponible":true}' console.log(json); // '{"id":"1hd72h3kw8fhs7dh34","unidad":"JMAPER","tipoRecurso":"HUMANO"}'
// Convertir JSON a objeto // Convertir JSON a objeto
const obj = JSON.parse(json); const obj = JSON.parse(json);
console.log(obj.tipo); // "Mascarillas" console.log(obj.id); //"1hd72h3kw8fhs7dh34"
``` ```
--- ---
...@@ -77,7 +77,7 @@ Devuelve una **Promise**, lo que significa que podemos usar `.then()` o `async/a ...@@ -77,7 +77,7 @@ Devuelve una **Promise**, lo que significa que podemos usar `.then()` o `async/a
### Ejemplo: obtener recursos del servidor ### Ejemplo: obtener recursos del servidor
```javascript ```javascript
fetch("https://api.hospitalcentral.com/recursos") fetch("https://api.panacea.com/recursos")
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
console.log("Recursos disponibles:", data); console.log("Recursos disponibles:", data);
...@@ -96,7 +96,7 @@ La sintaxis `async/await` simplifica el manejo de promesas, haciéndolo más leg ...@@ -96,7 +96,7 @@ La sintaxis `async/await` simplifica el manejo de promesas, haciéndolo más leg
```javascript ```javascript
async function cargarRecursos() { async function cargarRecursos() {
try { try {
const respuesta = await fetch("https://api.hospitalcentral.com/recursos"); const respuesta = await fetch("https://api.panacea.com/recursos");
const datos = await respuesta.json(); const datos = await respuesta.json();
console.table(datos); console.table(datos);
} catch (error) { } catch (error) {
...@@ -116,11 +116,12 @@ cargarRecursos(); ...@@ -116,11 +116,12 @@ cargarRecursos();
```javascript ```javascript
async function agregarRecurso() { async function agregarRecurso() {
const nuevo = { const nuevo = {
tipo: "Guantes", id: "17d263hf84j6sh3h9sjd",
cantidad: 150 unidad: "JMAPER",
tipoRecurso: "HUMANO"
}; };
const respuesta = await fetch("https://api.hospitalcentral.com/recursos", { const respuesta = await fetch("https://api.panacea.com/recursos", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify(nuevo) body: JSON.stringify(nuevo)
...@@ -142,11 +143,12 @@ agregarRecurso(); ...@@ -142,11 +143,12 @@ agregarRecurso();
```javascript ```javascript
async function actualizarRecurso(id) { async function actualizarRecurso(id) {
const recursoActualizado = { const recursoActualizado = {
tipo: "Guantes estériles", id: "17d263hf84j6sh3h9sjd",
cantidad: 200 unidad: "JMAPER",
tipoRecurso: "MATERIAL"
}; };
await fetch(`https://api.hospitalcentral.com/recursos/${id}`, { await fetch(`https://api.panacea.com/recursos/${id}`, {
method: "PATCH", method: "PATCH",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify(recursoActualizado) body: JSON.stringify(recursoActualizado)
...@@ -158,7 +160,7 @@ async function actualizarRecurso(id) { ...@@ -158,7 +160,7 @@ async function actualizarRecurso(id) {
```javascript ```javascript
async function eliminarRecurso(id) { async function eliminarRecurso(id) {
await fetch(`https://api.hospitalcentral.com/recursos/${id}`, { await fetch(`https://api.panacea.com/recursos/${id}`, {
method: "DELETE" method: "DELETE"
}); });
console.log("Recurso eliminado correctamente"); console.log("Recurso eliminado correctamente");
...@@ -170,7 +172,7 @@ async function eliminarRecurso(id) { ...@@ -170,7 +172,7 @@ async function eliminarRecurso(id) {
## 9. CORS (Cross-Origin Resource Sharing) ## 9. CORS (Cross-Origin Resource Sharing)
**CORS** es un mecanismo de seguridad que controla qué dominios pueden acceder a los recursos de una API. **CORS** es un mecanismo de seguridad que controla qué dominios pueden acceder a los recursos de una API.
Si tu frontend (`http://localhost:3000`) intenta acceder a una API en otro dominio (`https://api.hospitalcentral.com`), el servidor debe **permitir explícitamente** esa conexión. Si tu frontend (`http://localhost:3000`) intenta acceder a una API en otro dominio (`https://api.panacea.com`), el servidor debe **permitir explícitamente** esa conexión.
Ejemplo de encabezado que el servidor debe devolver: Ejemplo de encabezado que el servidor debe devolver:
...@@ -196,7 +198,7 @@ const lista = document.getElementById("lista"); ...@@ -196,7 +198,7 @@ const lista = document.getElementById("lista");
btn.addEventListener("click", async () => { btn.addEventListener("click", async () => {
try { try {
const res = await fetch("https://api.hospitalcentral.com/recursos"); const res = await fetch("https://api.panacea.com/recursos");
const recursos = await res.json(); const recursos = await res.json();
lista.innerHTML = ""; // limpiar lista previa lista.innerHTML = ""; // limpiar lista previa
......
Clone repository

Índice

  • Inicio
  • Modulo 1. Sitaxis básica
  • Modulo 2. Importaciones en Javascript
  • Modulo 3. Interacción con el BOM y con el DOM
  • Modulo 4. Uso de servicios y API REST