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
```javascript
// Objeto literal
const recurso = {
tipo: "Mascarillas",
cantidad: 300,
disponible: true
id: "1hd72h3kw8fhs7dh34",
unidad: "JMAPER",
tipoRecurso: "HUMANO"
};
// Conversión a JSON
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
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
### Ejemplo: obtener recursos del servidor
```javascript
fetch("https://api.hospitalcentral.com/recursos")
fetch("https://api.panacea.com/recursos")
.then(res => res.json())
.then(data => {
console.log("Recursos disponibles:", data);
......@@ -96,7 +96,7 @@ La sintaxis `async/await` simplifica el manejo de promesas, haciéndolo más leg
```javascript
async function cargarRecursos() {
try {
const respuesta = await fetch("https://api.hospitalcentral.com/recursos");
const respuesta = await fetch("https://api.panacea.com/recursos");
const datos = await respuesta.json();
console.table(datos);
} catch (error) {
......@@ -116,11 +116,12 @@ cargarRecursos();
```javascript
async function agregarRecurso() {
const nuevo = {
tipo: "Guantes",
cantidad: 150
id: "17d263hf84j6sh3h9sjd",
unidad: "JMAPER",
tipoRecurso: "HUMANO"
};
const respuesta = await fetch("https://api.hospitalcentral.com/recursos", {
const respuesta = await fetch("https://api.panacea.com/recursos", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(nuevo)
......@@ -142,11 +143,12 @@ agregarRecurso();
```javascript
async function actualizarRecurso(id) {
const recursoActualizado = {
tipo: "Guantes estériles",
cantidad: 200
id: "17d263hf84j6sh3h9sjd",
unidad: "JMAPER",
tipoRecurso: "MATERIAL"
};
await fetch(`https://api.hospitalcentral.com/recursos/${id}`, {
await fetch(`https://api.panacea.com/recursos/${id}`, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(recursoActualizado)
......@@ -158,7 +160,7 @@ async function actualizarRecurso(id) {
```javascript
async function eliminarRecurso(id) {
await fetch(`https://api.hospitalcentral.com/recursos/${id}`, {
await fetch(`https://api.panacea.com/recursos/${id}`, {
method: "DELETE"
});
console.log("Recurso eliminado correctamente");
......@@ -170,7 +172,7 @@ async function eliminarRecurso(id) {
## 9. CORS (Cross-Origin Resource Sharing)
**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:
......@@ -196,7 +198,7 @@ const lista = document.getElementById("lista");
btn.addEventListener("click", async () => {
try {
const res = await fetch("https://api.hospitalcentral.com/recursos");
const res = await fetch("https://api.panacea.com/recursos");
const recursos = await res.json();
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