Notas sobre promesas

[UlisesGascon]

// NO ASINCRONO!
function old_school () {
    console.log("Estoy calculando...")
    return 42
}

var dato = old_school();
console.log("Tengo el dato:", dato)

// Asincrono: fase 1

function old_callbacks (callback) {
    console.log("Estoy calculando...")
    setTimeout(function () {
        console.log("Termine de calcular...")
        callback(42)
    }, 1000)

}

old_school(function(dato){
    console.log("Tengo el dato:", dato)
});

// Asincrono: fase 1: Callback

function old_callbacks (callback) {
    console.log("Estoy calculando...")
    setTimeout(() => {
        console.log("Termine de calcular...")
        callback(42)
    }, 1000)

}

old_school(dato => console.log("Tengo el dato:", dato));

// Asincrono: fase 2: Promesas

function old_callbacks (callback) {
    console.log("Estoy calculando...")
    return new Promise (resolve => {
        setTimeout(() => {
            console.log("Termine de calcular...")
            resolve(42)
        }, 1000)
    })

}

old_school()
    .then(dato => console.log("Tengo el dato:", dato))

// AJAX con Callbacks...

function ajaxHandler(url, cb) {
  const request = new XMLHttpRequest();
  request.onreadystatechange = () => {

    if (request.readyState === 4){
        if(request.status === 200) {
            const data = JSON.parse(request.responseText)
            cb(false, data)
        } else {
            const error = {msg: "Algo fue mal...", request}
            cb(true, error)
        }
    }

  };

  request.open("GET", url, true);
  request.send();
}

const url = "http://api.openweathermap.org/data/2.5/weather?appid=40d439259718ef3f486d5ccb188390f5&units=metric&q=Madrid"
ajaxHandler(url, (err, data) => {
    console.log("Error?", err)
    console.log("Data:", data)
})

// AJAX con Promesas...

function ajaxHandler(url) {
    return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        request.onreadystatechange = () => {
            if (request.readyState === 4){
                if(request.status === 200) {
                    const data = JSON.parse(request.responseText)
                    resolve(data)
                } else {
                    const error = {msg: "Algo fue mal...", request}
                    reject(error)
                }
            }
        };
        request.open("GET", url, true);
        request.send();
    })
}

const cities = ["A Coruña",
"Alava",
"Albacete",
"Alicante",
"Almería",
"Asturias",
"Avila",
"Badajoz",
"Barcelona",
"Burgos",
"Cáceres",
"Cádiz",
"Cantabria",
"Castellón",
"Ceuta",
"Ciudad Real",
"Córdoba",
"Cuenca",
"Formentera",
"Girona",
"Granada",
"Guadalajara",
"Huelva",
"Huesca",
"Ibiza",
"Jaén",
"La Rioja",
"Las Palmas de Gran Canaria",
"León",
"Lérida",
"Lugo",
"Madrid",
"Málaga",
"Menorca",
"Murcia",
"Navarra",
"Orense",
"Palencia",
"Pontevedra",
"Salamanca",
"Santa Cruz de Tenerife",
"Tenerife",
"La Gomera",
"La Palma",
"Segovia"]

function getUrl (city) {
    const token = "Buscate un token...";
    return `http://api.openweathermap.org/data/2.5/weather?appid=${token}&units=metric&q=${city}`
}

function cityTpl (data) {
    return `<p>Ciudad: ${data.name}. Loc: ${data.coord.lat} | ${data.coord.lon}. ${data.main.temp}ºC</p>`
}

Promise.all(cities.map(city => ajaxHandler(getUrl(city))))
    .then(response => {
        document.body.innerHTML = response.map(cityTpl).join("")
    })
    .catch(console.warn)

/*

ajaxHandler(getUrl(cities[0]))
    //.then(data, => console.log("data:", data))
    .then(console.log)
    .catch(console.warn)
*/