Promesas y Asincronía

Este ejemplo muestra cómo usar promesas y asincronía en TypeScript y su equivalente en JavaScript.

Ejemplo 1

// TypeScript
function esperar(ms: number): Promise {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function ejecutar(): Promise {
    document.body.innerHTML += 'Esperando 2 segundos...';
    await esperar(2000);
    document.body.innerHTML += '¡Hecho!';
}

document.addEventListener("DOMContentLoaded", function() {
    ejecutar();
});

// JavaScript
function esperar(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function ejecutar() {
    document.body.innerHTML += 'Esperando 2 segundos...';
    await esperar(2000);
    document.body.innerHTML += '¡Hecho!';
}

document.addEventListener("DOMContentLoaded", function() {
    ejecutar();
});

Ejemplo 2

// TypeScript
function fetchData(url: string): Promise {
    return fetch(url).then(response => response.text());
}

async function mostrarDatos(): Promise {
    let datos: string = await fetchData('https://api.example.com/data');
    document.body.innerHTML += `Datos recibidos: ${datos}`;
}

document.addEventListener("DOMContentLoaded", function() {
    mostrarDatos();
});

// JavaScript
function fetchData(url) {
    return fetch(url).then(response => response.text());
}

async function mostrarDatos() {
    let datos = await fetchData('https://api.example.com/data');
    document.body.innerHTML += `Datos recibidos: ${datos}`;
}

document.addEventListener("DOMContentLoaded", function() {
    mostrarDatos();
});

Ejemplo 3

// TypeScript
function obtenerTiempo(ms: number): Promise {
    return new Promise(resolve => setTimeout(() => resolve(ms), ms));
}

async function tiempoTotal(): Promise {
    let tiempo: number = await obtenerTiempo(1000);
    document.body.innerHTML += `Tiempo transcurrido: ${tiempo} ms`;
}

document.addEventListener("DOMContentLoaded", function() {
    tiempoTotal();
});

// JavaScript
function obtenerTiempo(ms) {
    return new Promise(resolve => setTimeout(() => resolve(ms), ms));
}

async function tiempoTotal() {
    let tiempo = await obtenerTiempo(1000);
    document.body.innerHTML += `Tiempo transcurrido: ${tiempo} ms`;
}

document.addEventListener("DOMContentLoaded", function() {
    tiempoTotal();
});