Programação assíncrona elegante com promessas

Quais são as promessas?

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 nas funções de retorno de chamada

1. Escolha o recheio. Isso pode levar algum tempo, se você pensar por um longo tempo, e falhar se mudar de idéia e pedir um curry.
2. Nós fazemos um pedido. Cozinhar pizza leva algum tempo e pode falhar se o restaurante não tiver os ingredientes necessários.
3. Pegamos pizza e comemos. O recebimento da pizza pode falhar se, por exemplo, não pudermos pagar pelo pedido.

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

Usamos promessas

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)

• Uma promessa é cumprida apenas uma vez (sucesso ou fracasso). Ele não pode ser executado duas vezes ou alternar de êxito para falha ou vice-versa após a conclusão da operação.
• Se a promessa for concluída e adicionarmos uma função de retorno de chamada para processar seu resultado, essa função será chamada, apesar do evento ter ocorrido antes de adicionar a função.

Sintaxe básica da promessa: um exemplo 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)

Resposta a Falhas

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

Bloquear fusão

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)
})

Conclusões de terminologia promissora

1. 1. Uma promessa cumprida com sucesso é chamada cumprida. Retorna o valor que pode ser obtido através da cadeia a partir de .then () no final da promessa. A função de execução no bloco .then () contém o valor retornado pela promessa.
2. 2. Uma promessa cumprida sem sucesso é chamada de rejeitada. Retorna o motivo, a mensagem de erro que levou à rejeição da promessa. Esse motivo pode ser obtido através do bloco .catch () no final da promessa.

Execute o código após várias promessas

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)
    })
}

• Primeiro, a segunda promessa de retorno depende do tipo de valor. Dentro da função de execução, usamos a instrução if ... else if para retornar a promessa, dependendo do tipo de arquivo que precisamos decodificar (nesse caso, escolhemos entre blob e texto, mas o exemplo pode ser facilmente estendido para trabalhar com outros 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)

Execute o código após cumprir / rejeitar a promessa

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.`)
    })
}

Escrevendo sua própria promessa

Promessa do construtor ()

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

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

timeoutPromise.then(alert)

Trabalhamos com a rejeição de uma promessa

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. Primeiro, verificamos a mensagem. Se estiver vazio ou não for uma string, rejeitamos a promessa e relatamos um erro.
2. Em segundo lugar, verificamos o atraso. Se é um número negativo ou não, também rejeitamos a promessa e relatamos um erro.
3. Por fim, se os dois argumentos estiverem OK, exiba a mensagem após um certo tempo (intervalo) usando setTimeout ().

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

Exemplo mais realista.

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

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

• Quando a solicitação é bem-sucedida , o manipulador de êxito cumpre a promessa com o resultado da solicitação.
• Quando a solicitação falha , o manipulador onerror rejeita a promessa com o erro da solicitação.

Conclusão