CursosEmpresasBlogLiveConfPrecios

Playground: Crea una función de delay que soporte asincronismo

Clase 12 de 26 • Curso de Asincronismo con JavaScript

Clase anteriorSiguiente clase

Contenido del curso

Introducción
  • 1
    Lo que aprenderás en este curso

    Lo que aprenderás en este curso

    01:34
  • 2
    Qué es el asincronismo

    Qué es el asincronismo

    09:25
  • 3
    Event Loop

    Event Loop

    11:13
  • 4
    Iniciando a programar con JavaScript

    Iniciando a programar con JavaScript

    02:59
Callbacks
  • 5
    Configuración

    Configuración

    10:23
  • 6
    Qué son los Callbacks

    Qué son los Callbacks

    14:56
  • 7

    Playground: Ejecuta un callback con 2s de demora

    00:00
  • 8
    XMLHTTPRequest

    XMLHTTPRequest

    15:03
  • 9
    Fetch data

    Fetch data

    17:44
  • 10
    Callback hell

    Callback hell

    06:56
Promesas
  • 11
    Qué son las promesas

    Qué son las promesas

    11:54
  • 12

    Playground: Crea una función de delay que soporte asincronismo

    00:00
  • 13
    Fetch

    Fetch

    16:12
  • 14
    Fetch POST

    Fetch POST

    14:55
Async Await
  • 15
    Funciones asíncronas

    Funciones asíncronas

    10:07
  • 16
    Try and catch

    Try and catch

    11:51
  • 17

    Playground: Captura el error de una petición

    00:00
  • 18
    ¿Cómo enfrentar los errores?

    ¿Cómo enfrentar los errores?

    03:42
Generadores
  • 19
    Generators

    Generators

    08:06
Proyecto CV
  • 20
    Proyecto del curso

    Proyecto del curso

    11:48
  • 21
    Consumiendo API

    Consumiendo API

    19:24
  • 22
    Desplegando el proyecto

    Desplegando el proyecto

    16:45
  • 23

    Playground: Crea una utilidad para hacer peticiones

    00:00
Nunca pares de crear
  • 24
    Conclusión

    Conclusión

    03:09
  • 25
    ¿Qué camino tomar para seguir aprendiendo?

    ¿Qué camino tomar para seguir aprendiendo?

    04:12
  • 26

    Autoevaluación de Proyecto: Creación de Landing Page

    00:44
    Kevin Esteban Rincon Novoa

    Kevin Esteban Rincon Novoa

    student•
    hace 3 años

    Dejó el código abajo para el que lo necesite, intenta resolverlo primero antes de verlo

    ** * * * * * * * * * *

    export function delay(time, message) { return new Promise((resolve, reject) =>{ window.setTimeout(() =>{ resolve (message); }, time); }); }
      Cesar Perez

      Cesar Perez

      student•
      hace 3 años

      Gracias, aun no tenia claro la sintaxis de las promesas asi que tu ejemplo me ayudo mucho

      Manuel Araujo

      Manuel Araujo

      student•
      hace 3 años

      Siempre que uso window. en cualquier ejercicio, me aparece en la consola de VSCode window is not defined

    Juan Camilo Urbano Gómez

    Juan Camilo Urbano Gómez

    student•
    hace 3 años

    Hola, Yo incluí una pequeña verificación de que el tiempo recibido no sea negativo ;) ** * * * * * * * * * *

    export function delay(time, message) { const pro = new Promise(function (resolve, reject) { if (time >= 0) { window.setTimeout(() => { resolve(message) }, time) } else { reject("Time cannot be negative") } }) return pro }
      Nicolas Molina

      Nicolas Molina

      teacher•
      hace 3 años

      wow esa es una gran validación la asegurar que sea un número positivo

      Nestor Rios Garcia

      Nestor Rios Garcia

      student•
      hace 3 años

      Gran gestión para posibles errores.

    Diego Rene Casallas Diaz

    Diego Rene Casallas Diaz

    student•
    hace 3 años

    Fue complejo entender que la dentro del setime out iba una funcion que contenia el rejected y no el llamado al rejected. Mi solucion:

    export function delay(time, message) { return new Promise((resuelve, rechaza) => { if (true) { window.setTimeout(() => resuelve(message), time) /*así no: window.setTimeout(resuelve(message), time)*/ } }) }
      Luis Tapia

      Luis Tapia

      student•
      hace 3 años

      En este caso el if (true) sobra porque siempre será cierto. Sin ese condicional puede funcionar igual de bien. Generalmente se usa para comprobar si algún dato de la aplicación cumple ciertos parámetros en el momento que llamas la función, cuando no tienes la certeza de que siempre será así. . Saludos ;)

    Hernan Camilo Jimenez Garcia

    Hernan Camilo Jimenez Garcia

    student•
    hace 3 años

    Estos ejercicios me parecen extraños porque en una clase se ve algo y el siguiente ejercicio hay que resolverlo con algo que no se ha visto. Siendo muy jr en JS no se me habría ocurrido la respuesta ni en un año

      Huilén Solís

      Huilén Solís

      student•
      hace 3 años

      A mi me solia suceder. Si no lograba solucionarlo era por que los conceptos no quedaban lo suficientemente asentados. Para solucionar eso, me di cuenta que las clases de platzi no bastaban. Siempre mira el mismo tema de la clase en youtube o en cualquier web en la que te lo expliquen de una mejor manera, en el caso de que no entiendas. Por ejem con este profr yo no entendi nada, pero luego de un par de tutoriales y leyendo la documentacion logre entenderlo mejor.

      Luis Otoniel Diaz Calleja

      Luis Otoniel Diaz Calleja

      student•
      hace 2 años

      Es lo único malo, sin embargo, considero que en parte es bueno ya que te obliga a consultar otras fuentes y a ejercitar tu lógica en el lenguaje

    Genoveva Flores

    Genoveva Flores

    student•
    hace 3 años

    No me carga el playground... :( Asi lo veo en mi navegador..

    Captura.PNG
    marco antonio

    marco antonio

    student•
    hace 3 años

    No entiendo la consola de ejercicios me marca error y me saca como se lo hice en Firefox


    function funcionTiempo(tiempo, msn){ return new Promise((resolve, reject) => { if (tiempo == 2000) setTimeout(resolve,tiempo,msn); else reject('__ERROR__');});}; const fTiempo = funcionTiempo(2000, 'mensaje'); fTiempo.then(resultado =>{ console.log(resultado);}).catch( error => { console.log(error);});
      Elcira Ibarra

      Elcira Ibarra

      student•
      hace 3 años

      Agregale el objeto window al setTimeout

      window.setTimeout()
      marco antonio

      marco antonio

      student•
      hace 3 años

      @Elcira_Arg lo hice pero no funciona

    Luis Antonio Márquez Castro

    Luis Antonio Márquez Castro

    student•
    hace 3 años

    Se me queda siempre en “Corriendo pruebas”, a alguien mas le pasa?

      David Arias Fuentes

      David Arias Fuentes

      student•
      hace 3 años

      Hola Luis, si al parecer se queda “Corriendo pruebas” pero si le das nuevamente al botón de “Correr Pruebas” te da el resultado. Feliz día!

      Nicolas Molina

      Nicolas Molina

      teacher•
      hace 3 años

      Hola, esto ya esta corregido!

    Fabian David Correa Garcia

    Fabian David Correa Garcia

    student•
    hace 3 años

    Hola Team Platzi, se que están en versión de pruebas, pero mi solución es la misma pero diferente método así como las hemos utilizado en los cursos, pero la desarrollo y me sale error. por que hay que utilizar arrow function debería recibir varias soluciones, Gracias Team, nunca parar de aprender 😃 * *

    • No pongo el código visible para que lo intenten solucionar
    export function delay(time, message) { return Promise(function (resolve, reject) { window.setTimeout(() => { resolve(message) }, time) }) }
      Carlos Rubén Díaz Gutiérrez

      Carlos Rubén Díaz Gutiérrez

      student•
      hace 3 años

      Te marca error porque te falta la palabra new antes Promise, además, declaras reject pero nunca lo usas.

    Porfirio González López

    Porfirio González López

    student•
    hace 3 años

    Odio estos ejercicios, no sé si aún no hago suficientes ejercicios o no comprendo las instrucciones : (

      Sergio Andrés Bolaños Penagos

      Sergio Andrés Bolaños Penagos

      student•
      hace 3 años

      La frustración es normal en este mundo, no te preocupes, tomalo como aprendizaje y continua! Yo ya he trabajado durante 1 año y aún así fallé en algún que otro Playground

      Pol Valle

      Pol Valle

      student•
      hace 3 años

      Amigo, la programación es incertidumbre constante, a medida que la tecnología avance vas a sentir esa sensación constantemente, así que es normal que te sientas así

    Ricardo Ayala Montes

    Ricardo Ayala Montes

    student•
    hace 3 años

    Aúnque en VS Code sale bien aqui confunde, pero solo es poner la function sin implementar

    . . . . . . . .

    export function delay(time, message) { // Tu código aquí 👈 return new Promise(function (resolve, reject) { if (message != null || time < 0) { window.setTimeout(() => { resolve(message); }, time); } else { reject("no variables"); } }); }
    Jhon Pulido

    Jhon Pulido

    student•
    hace 3 años
    Application error: a client-side exception has occurred (see the browser console for more information). por que sale esto? en la pantalla de platzi
      Ismael Olguin Nevárez

      Ismael Olguin Nevárez

      student•
      hace 3 años

      también tengo ese error, esperemos nos respondan

      Daniel Alberto Cifuentes Castro

      Daniel Alberto Cifuentes Castro

      student•
      hace 3 años

      X3. También tengo ese error!

    Luis Tapia

    Luis Tapia

    student•
    hace 3 años

    ¿Por qué cuando declaro tanto el parámetro resolve y reject (tal como lo escribí abajo) no paso todas las pruebas, mientras cuando sólo pongo el que se usa (resolve) sí?

    export function delay(time, message) { return new Promise((resolve, reject) => { window.setTimeout(() => { resolve(message); }, time); }); }
      Fernando Orozco Velasquez

      Fernando Orozco Velasquez

      student•
      hace 3 años

      Que extraño, acabo de correr tu código en la página y si me pasa todas las pruebas 🤔

      Carlos Rubén Díaz Gutiérrez

      Carlos Rubén Díaz Gutiérrez

      student•
      hace 3 años

      Me pasó lo mismo. Quiero creer que es porque no lo estás utilizando,

    Esteban Maruri

    Esteban Maruri

    student•
    hace 3 años

    yo le doy en correr pruebas pero es equivalente a usar la vista? alguna diferencia?

      Charles Duck Castillo Rosas

      Charles Duck Castillo Rosas

      student•
      hace 3 años

      si al parecer es equivalente

    Ángela Sofía Osorio García

    Ángela Sofía Osorio García

    student•
    hace 2 años

    Mi solución.

    💚 . . . . .

    . . . . .

    export function delay(time, message) { return new Promise((resolve, reject) => { if (Promise) { window.setTimeout(() => { resolve(message); }, time) } else { reject('No se puede completar') } }) }
    Juan Camilo Sandoval Hernandez

    Juan Camilo Sandoval Hernandez

    student•
    hace 3 años

    Mi solución: . . . . . . . . . . . . . . . . . . . .

    export function delay(time, message) { // Tu código aquí 👈 return new Promise((resolve, reject) => { if (time, message) { window.setTimeout(() => { resolve(message); }, time); } else { reject('The parameters are not met') } }); }
    Gonzalo Gutiérrez Castillo

    Gonzalo Gutiérrez Castillo

    student•
    hace 3 años

    Mi solución en 3 lineas de código: . . . . .

    function delay(time, message) { return new Promise((resolve, reject) => { window.setTimeout(()=>resolve(message),time) }) }
      Nestor Rios Garcia

      Nestor Rios Garcia

      student•
      hace 3 años

      Yo lo hice en 7:

      function delay(time, message){ return new Promise((resolve, reject) => { setTimeout(() => { resolve(message) }, time) }) }

      bromi.

    Sharon Gizela Arana Mendoza

    Sharon Gizela Arana Mendoza

    student•
    hace 3 años
    2022-12-05.png
    Ilvar Santiago Camelo Amaya

    Ilvar Santiago Camelo Amaya

    student•
    hace un año

    alguien sabe como ocultar los comentarios?

    Jymmy Murillo Bernal

    Jymmy Murillo Bernal

    student•
    hace 3 años

    No funciona Aparece una pantalla blanca con el siguiente mensaje:

    Application error: a client-side exception has occurred (see the browser console for more information).

    Gilberto Alejandro Monroy Morales

    Gilberto Alejandro Monroy Morales

    student•
    hace 3 años

    No agarra la consola de pruebas ayudaa

    226078bb-c9cd-4b83-a885-05d904cd2178.jpg
      Carlos Rubén Díaz Gutiérrez

      Carlos Rubén Díaz Gutiérrez

      student•
      hace 3 años

      A veces pasa. Intenta actualizar la página.

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads