Programación asincrónica elegante con promesas.

¿Qué son las promesas?

function handle CallButton(evt){
    setStatusMessage('Calling...')
    navigator.mediaDevices.getUserMedia({video: true, audio: true})
    .then(chatStream => {
        selfViewElem.srcObject = chatStream
        chatStream.getTracks().forEach(track => myPeerConnection.addTrack(track, chatStream))
        setStatusMessage('Connected')
    }).catch(err => {
        setStatusMessage('Failed to connect')
    })
}

Problema de funciones de devolución de llamada

1. Elige el relleno. Esto puede llevar algo de tiempo si lo piensa durante mucho tiempo, y fracasará si cambia de opinión y pide un curry.
2. Hacemos un pedido. Cocinar pizza lleva algo de tiempo y puede fallar si el restaurante carece de los ingredientes necesarios.
3. Conseguimos pizza y comemos. Recibir pizza puede fallar si, por ejemplo, no podemos pagar el pedido.

chooseToppings(function(toppings){
    placeOrder(toppings, function(order){
        collectOrder(order, function(pizza){
            eatPizza(pizza)
        }, failureCallback)
    }, failureCallback)
}, failureCallback)

Usamos promesas

chooseToppings()
.then(function(toppings){
    return placeOrder(toppings)
})
.then(function(order){
    return collectOrder(order)
})
.then(function(pizza){
    eatPizza(pizza)
})
.catch(failureCallback)

chooseToppings()
.then(toppings =>
    placeOrder(toppings)
)
.then(order =>
    collectOrder(order)
)
.then(pizza =>
    eatPizza(pizza)     
)
.catch(failureCallback)

chooseToppings()
.then(toppings => placeOrder(toppings))
.then(order => collectOrder(order))
.then(pizza => eatPizza(pizza))
.catch(failureCallback)

chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback)

• Una promesa se cumple solo una vez (éxito o fracaso). No se puede ejecutar dos veces o cambiar de éxito a fracaso o viceversa después de que se complete la operación.
• Si se completa la promesa y agregamos una función de devolución de llamada para procesar su resultado, se llamará a esta función, a pesar de que el evento ocurrió antes de que se agregara la función.

Sintaxis de promesa básica: un ejemplo real

let promise = fetch('coffee.jpg')

response => response.blob()

function (response){
    return response.blob()
}

let promise2 = promise.then(response => response.blob())

let promise3 = promise2.then(myBlob => {

})

let objectURL = URL.createObjectURL(myBlob)
let image = document.createElement('img')
image.src = objectURL
document.body.appendChild(image)

Respuesta a la falla

let errorCase = promise3.catch(e => {
    console.log('There has been a problem with your fetch operation: ' + e.message)
})

Bloque de fusión

fetch('coffee.jpg')
.then(response => response.blob())
.then(myBlob => {
    let objectURL = URL.createObjectURL(myBlob)
    let image = document.createElement('img')
    image.src = objectURL
    document.body.appendChild(image)
})
.catch(e => {
    console.log('There has been a problem with your fetch operation: ' + e.message)
})

Promesa Terminología Conclusiones

1. 1. Una promesa completada con éxito se llama cumplida. Devuelve el valor que se puede obtener a través de la cadena desde .then () al final de la promesa. La función de ejecución en el bloque .then () contiene el valor devuelto por la promesa.
2. 2. Una promesa cumplida sin éxito se llama rechazada. Devuelve el motivo, el mensaje de error que condujo al rechazo de la promesa. Este motivo se puede obtener a través del bloque .catch () al final de la promesa.

Ejecute el código después de varias promesas.

Promise.all([a,b,c]).then(values => {
        ...
})

let a = fetch(url1)
let b = fetch(url2)
let c = fetch(url3)

Promise.all([a, b, c]).then(values => {
    ...
})

function fetchAndDecode(url, type){
    return fetch(url).then(response => {
        if(type === 'blob'){
            return response.blob()
        } else if(type === 'text'){
            return response.text()
        }
    }).catch(e => {
        console.log('There has been a problem with your fetch operation ' + e.message)
    })
}

• Primero, la segunda promesa de devolución depende del tipo de valor. Dentro de la función de ejecución, utilizamos el operador if ... else if para devolver la promesa según el tipo de archivo que necesitemos decodificar (en este caso, elegimos entre blob y texto, pero el ejemplo puede extenderse fácilmente para trabajar con otros tipos).
• -, «return» fetch(). , (.. , blob() text(), , , ). , return .

let coffee = fetchAndDecode('coffee.jpg', 'blob')
let tea = fetchAndDecode('tea.jpg', 'blob')
let description = fetchAndDecode('description.txt', 'text')

Promise.all([coffee, tea, description]).then(values => {

})

console.log(values)
//       
let objectURL1 = URL.createObjectURL(values[0])
let objectURL2 = URL.createObjectURL(values[1])
let descText = values[2]

//  
let image1 = document.createElement('img')
let image2 = document.createElement('img')
image1.src = objectURL1
image2.src = objectURL2
document.body.appendChild(image1)
document.body.appendChild(image2)

//  
let para = document.createElement('p')
para.textContent = descText
document.body.appendChild(para)

Ejecute el código después de cumplir / rechazar la promesa

myPromise
.then(response => {
    doSomething(response)
    runFinalCode()
})
.catch(e => {
    returnError(e)
    runFinalCode()
})

myPromise
.then(response => {
    doSomething(response)
})
.catch(e => {
    returnError(e)
})
.finally(() => {
    runFinalCode()
})

function fetchAndDecode(url, type){
    return fetch(url).then(response => {
        if(type === 'blob'){
            return response.blob()
        } else if(type === 'text'){
            return response.text()
        }
    }).catch(e => {
        console.log(`There has been a problem with your fetch operation for resource "${url}": ${e.message}`)
    }).finally(() => {
        console.log(`fetch attempt for "${url}" finished.`)
    })
}

Escribiendo tu propia promesa

Promesa del constructor ()

let timeoutPromise = new Promise((resolve, reject) => {
    setTimeout(function(){
        resolve('Success!')
    }, 2000)
})

timeoutPromise
.then((message) => {
    alert(message)
})

timeoutPromise.then(alert)

Trabajamos rechazando una promesa.

function timeoutPromise(message, interval){
    return new Promise((resolve, reject) => {
        if(message === '' || typeof message !== 'string'){
            reject('Message is empty or not a string')
        } else if(interval < 0 || typeof interval !== number){
            reject('Interval is negative or not a number')
        } else{
            setTimeout(function(){
                resolve(message)
            }, interval)
        }
    })
}

1. Primero, verificamos el mensaje. Si está vacío o no es una cadena, rechazamos la promesa e informamos un error.
2. En segundo lugar, verificamos el retraso de tiempo. Si es negativo o no un número, también rechazamos la promesa e informamos un error.
3. Finalmente, si ambos argumentos están bien, muestre el mensaje después de un cierto tiempo (intervalo) usando setTimeout ().

timeoutPromise('Hello there!', 1000)
.then(message => {
    alert(message)
}).catch(e => {
    console.log('Error: ' + e)
})

Un ejemplo más realista.

function promisifyRequest(request){
    return new Promise(function(resolve, reject){
        request.onsuccess = function(){
            resolve(request.result)
        }

        request.onerror = function(){
            reject(request.error)
        }
    })
}

• Cuando la solicitud tiene éxito , el controlador de éxito cumple la promesa con el resultado de la solicitud.
• Cuando la solicitud falla , el controlador onerror rechaza la promesa con el error de la solicitud.

Conclusión