CursosEmpresasBlogLiveConfPrecios

Configuración

Clase 5 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
    Paul Martin Vargas Portugal

    Paul Martin Vargas Portugal

    student•
    hace 3 años

    pwd: Saber donde estoy ubicado. mkdir: Creación de carpeta cd: Moverse a carpetas git init: Inicias Git npm init: Le da nombre, versión, entre otras cosas al proyecto code . : Inicia el editor de códigos

      Sergio Lopez

      Sergio Lopez

      student•
      hace 3 años

      -Para no darle valores default: npm init -y

      -Para que Visual Code no abra otra ventana si usas la terminal del programa: code ./ -r

      Felix Torres Javier Antonio

      Felix Torres Javier Antonio

      student•
      hace 3 años

      gracias por el aporte"!!!!

    Maria Gabriela Rodriguez Cuevas

    Maria Gabriela Rodriguez Cuevas

    student•
    hace 3 años

    ⚙️ 𝗖𝗹𝗮𝘀𝗲 #𝟱: 𝗖𝗼𝗻𝗳𝗶𝗴𝘂𝗿𝗮𝗰𝗶ó𝗻 𝟱/𝟮𝟭 ⚙️ . 🖋️ ++Conceptos fundamentales antes de crear el proyecto:++ .

    • Web APIs JavaScript del lado del cliente: setTimeout, XMLHttpRequest, File Reader, DOM. Node: fs, https.
    • API: El término API es una abreviatura de “Application Programming Interface” (Interfaz de programación de aplicaciones en español). Es un conjunto de rutinas que provee acceso a funciones de un determinado software.
    • Hoisting: Sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código en tiempo de compilación.
    • XML: Lenguaje de marcado creado para la transferencia de información, legible tanto para seres humanos como para aplicaciones informáticas, y basado en una sencillez extrema y una rígida sintaxis. Así como el HTML estaba basado y era un subconjunto de SGML, la reformulación del primero bajo la sintaxis de XML dio lugar al XHTML; XHTML es, por tanto, un subconjunto de XML.
    • DOM: El DOM permite acceder y manipular las páginas XHTML como si fueran documentos XML. De hecho, DOM se diseñó originalmente para manipular de forma sencilla los documentos XML.
    • Events: Comportamientos del usuario que interactúa con una página que pueden detectarse para lanzar una acción, como por ejemplo que el usuario haga click en un elemento (onclick), que elija una opción de un desplegable (onselect), que pase el ratón sobre un objeto (onmouseover), etc.
    • Compilar: Compilar es generar código ejecutable por una máquina, que puede ser física o abstracta como la máquina virtual de Java.
    • Transpilar: Transpilar es generar a partir de código en un lenguaje código en otro lenguaje. Es decir, un programa produce otro programa en otro lenguaje cuyo comportamiento es el mismo que el original. . . 🛠️ ++Crear e inicializar un Proyecto:++ .
    1. Tener instalado ++Visual Studio Code++. .
    2. Abrir la terminal (en Linux al presionar las teclas ++Ctrl + Alt + T++). .
    3. Para conocer donde estamos ubicados se escribe ++pwd++ y se da ENTER. .
    4. Para ver las carpetas y archivos del lugar donde estamos, se escribe ++ls++ y se da ENTER. .
    5. Para crear una carpeta se escribe ++mkdir nombre-de-la-carpeta++ y se da ENTER. .
    6. Para entrar a una carpeta se escribe ++cd nombre-de-la-carpeta++ y se da ENTER. .
    7. Si se quiere ir a la carpeta contenedora de la carpeta actual que estamos, se escribe ++cd ..++ y se da ENTER. .
    8. En linux para no escribir los comando de mkdir y cd, se escribe ++take nombre-de-la-carpeta++ y se da ENTER. .
    9. Para crear un archivo se escribe ++touch nombre-del-archivo-extensión++ y se da ENTER. .
    10. Para limpiar la pantalla en la terminal se escribe ++clear++ y se da ENTER. .
    11. Si solo se quiere mover el scroll se presionan las teclas ++Ctrl + Alt + l++ .
    12. Para iniciar el repositorio se escribe ++git init++ y se da ENTER. .
    13. Vamos a inicializar el proyecto con npm, se escribe ++npm init++ y se da ENTER. .
    14. Aparece el nombre del proyecto, si no se quiere modificar el nombre, se da ENTER. .
    15. Aparece la versión del proyecto, si no se quiere modificar el número, se da ENTER. .
    16. Aparece la descripción del proyecto, si se quiere modificar dejar vacío, se da ENTER. .
    17. Lo mismo, dejar vacío: entry point, test command, git repository. .
    18. En keywords se escribe las palabras claves como ++javascript++ y se da ENTER. .
    19. En la licencia por defecto aparece la ISC, pero la más común es la ++MIT++ para compartir y poder comercializar después el producto. .
    20. Por último, aparecen los datos ingresados (guardados en el archivo package.json) y si no hay que modificar, se escribe ++yes++ y se da ENTER. .
    21. Para entrar al editor VSC se escribe ++code .++ y se da ENTER. .
    22. Una vez dentro de VSC, en el panel izquierdo aparece el archivo package.json, crear una nueva carpeta llamada ++src++ donde contendrá nuestro código. .
    23. Crear el archivo ++.gitignore++ (estará fuera de la carpeta src). En los sistemas Unix, dado que el archivo empieza con un punto, al abrir un explorador de archivos los toma como archivos ocultos y no son visibles. El contenido del archivo queda:
    /node_modules/
    1. Para guardar los cambios de un archivo, presionar las teclas ++Ctrl + S++ .
    2. Muy importante instalar ++la extensión Code Runner++, presionar las teclas ++Ctrl + P++ y pegar: ++ext install formulahendry.code-runner++ y dar ENTER. Lo instala automáticamente (fuente: aquí).
      Felipe Muñoz Caceres

      Felipe Muñoz Caceres

      student•
      hace 3 años

      muchas gracias por estos resumenes de las clases, me han ayudado a recordar puntos importantes.

      Maria Gabriela Rodriguez Cuevas

      Maria Gabriela Rodriguez Cuevas

      student•
      hace 3 años

      Esa es una de las ventajas de la comunidad Platzi, por medio de comentarios he solucionado errores que no me dejaban avanzar, así como también de repasar conceptos. :)

    Clem Acosta

    Clem Acosta

    student•
    hace 3 años

    Para aquellos que se quieran saltar las preguntas del npm init pueden agregar el flag --yes o -y para que les genere el archivo por defecto.

    npm init -y
      Jhon Dairo Meche Tenza

      Jhon Dairo Meche Tenza

      student•
      hace 3 años

      x2

    Emerson David Cabrera Salas

    Emerson David Cabrera Salas

    student•
    hace 3 años

    Cuando me lo explican todo lo que necesito tan claro como lo hizo el profe!

    32767972.jpg

      Jesus Nicolas Vite

      Jesus Nicolas Vite

      student•
      hace 2 años

      En efecto, la primera ves que he entendido sin estresarme.

    Pablo Torres Pérez

    Pablo Torres Pérez

    student•
    hace 3 años

    Un comando útil para ignorar archivos cuando se utiliza git con node es:

    npx gitignore node
      Jhon Dairo Meche Tenza

      Jhon Dairo Meche Tenza

      student•
      hace 3 años

      x2

      Diego Raciel Ortega Hernandez

      Diego Raciel Ortega Hernandez

      student•
      hace 2 años

      Wow eso si no lo conocia

    Stephany Plaza

    Stephany Plaza

    student•
    hace 3 años

    Para aquellos que no les funcione el npm init Deben verificar si tienen instalado NodeJS en su última versión, pueden chequearlo en la terminal con el siguiente comando “node -v” En caso de no recibir respuesta puedes instalarlo desde su sitio oficial: nodejs .org Aunque mi recomendacion es que vean el curso de prework para tener todo configurado para este y los proximos cursos :)

    Miguel Angel Perez Cardona

    Miguel Angel Perez Cardona

    student•
    hace 3 años

    Pienso que antes de este curso se debe tomar el curso donde el profesor te dice como instalar todo de acuerdo a tu sistema operaitvo. De hecho lo explica bien.

    Aca algunos comandos que me se.

    ls -> Te muestra los archivos que hay donde estas ubicado. cd .. -> Retrocede de carpeta. cd -> Avanza de carpeta. rm -> Eliminar un archivo o carpeta. cd ~ -> Te lleva al home de la terminal. cd mnt -> Te lleva al directorio de windows. touch -> Crear un archivo . mv -> Mover un archivo o carpeta .

    Les recomiendo el curso de github con Freddy, github es... hermoso.

    https://platzi.com/cursos/git-github/

    Danilo Estupiñan

    Danilo Estupiñan

    student•
    hace 3 años

    Me gusta que despues del curso de git, seguimos usando los repositorios asi nos acostumbramos a llevar buenas practicas en nuestros proyectos

    Julian Jose Sossa Cruz

    Julian Jose Sossa Cruz

    student•
    hace 3 años

    Agregar autor

    tu nombre <tucorreo@correo.com>
      Porfirio González López

      Porfirio González López

      student•
      hace 3 años

      No abre

    Luis Carlos Zapata García

    Luis Carlos Zapata García

    student•
    hace 3 años

    . code me sirvio en windows.

    Joao Ivan Garduño Salgado

    Joao Ivan Garduño Salgado

    student•
    hace 3 años

    git init -> Repositorio inicializado npm init -> inicializar nuestro proyecto con NPM

    Erick Martin Meza Alonso

    Erick Martin Meza Alonso

    student•
    hace 3 años

    Alguien que sepa cuál es el thema de oh-my-zsh que Oscar está usando? se les agradecerá mucho que lo comenten <3

      Douglas Lovera

      Douglas Lovera

      student•
      hace 3 años

      Hola! Él escribió este artículo sobre el tema y de cómo usarlo: https://gndx.dev/blog/tema-oh-my-zsh-gndx

      Erick Martin Meza Alonso

      Erick Martin Meza Alonso

      student•
      hace 3 años

      gracias, @Douglaslovera

    Nico Melgarejo Sabelle

    Nico Melgarejo Sabelle

    student•
    hace 3 años

    pwd: Print Working Directory mkdir: MaKe DIRectory

    Para crear el .gitignote desde la terminal podemos escribir touch .gitignore

      Daniel Builes Gomez

      Daniel Builes Gomez

      student•
      hace 2 años

      muchas gracias

    Cristian Muñoz

    Cristian Muñoz

    student•
    hace 3 años

    Pueden utilizar esta web para construir su .gitignore mas fácil

    https://www.toptal.com/developers/gitignore/

    Andres Felipe Baron Becerra

    Andres Felipe Baron Becerra

    student•
    hace 3 años

    no me funciona npm init y ya desacrgue la ultima version

      Rosario Sánchez

      Rosario Sánchez

      student•
      hace 3 años

      Hola Andres, fijate si tenes node instalado, capaz no lo tenes y ese sea tu problema.

      Diego Jose Chavez

      Diego Jose Chavez

      student•
      hace 2 años

      Revisa si tienes node y npm instalado con los siguientes comandos:

      npm --version node --version
    Michael Figueroa Reyes

    Michael Figueroa Reyes

    student•
    hace 3 años

    Hello guys , Alguna configuration extra para poder configurar con npm por que la configuración actual no me reconoce el comando en el que estamos trabajando. help please .

    Vanessa Gordillo

    Vanessa Gordillo

    student•
    hace 3 años

    ayuda!! no me sale igual git init en la teminal (me sale esto: Reinitialized existing Git repository in C:/Users/nvane/js-asincronismo/.git/ )y al ejecutar npm init me sale esto: npm : El término 'npm' no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable.

      Heidenber Palacio Garzón

      Heidenber Palacio Garzón

      student•
      hace 3 años
      1. Ya tienes el repo inicializado, si quieres borrarlo y volver a empezar debes hacer
      rm -rf .git git init
      1. Parece que no tienes instalado NodeJS
    Daniela Stornelli

    Daniela Stornelli

    student•
    hace 3 años

    2:50 esa terminal o linea de comandos sería por ejemplo GIt Bash?

      Heidenber Palacio Garzón

      Heidenber Palacio Garzón

      student•
      hace 3 años

      O la que más te guste.

      Cristian Blandón

      Cristian Blandón

      student•
      hace 3 años

      La que usa el profe es iTerm en MacOS... Si estás en Windows y quieres usar los mismos comandos, Git Bash te serviría sin problema.

    Calvin Rafael Bobadilla Fernandez

    Calvin Rafael Bobadilla Fernandez

    student•
    hace un año

    La explicacion que dio hoy fue universal (claro, era basicamente un tutorial pero aun asi cuenta) 10/10

    Pastor Alexander Castro Aguilar

    Pastor Alexander Castro Aguilar

    student•
    hace un año

    Execelente explicación, no asume que el estudiante ya posee conocimientos sobre el tema, haciéndola más accesible para los que estamos empezando.

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