Programmation asynchrone élégante avec des promesses

Quelles sont les promesses?

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

Problème des fonctions de rappel

1. Choisissez la garniture. Cela peut prendre un certain temps si vous y pensez longtemps, et échouer si vous changez d'avis et commandez un curry.
2. Nous passons une commande. La cuisson de la pizza prend un certain temps et peut échouer si le restaurant manque des ingrédients nécessaires.
3. Nous obtenons une pizza et mangeons. La réception de la pizza peut échouer si, par exemple, nous ne pouvons pas payer la commande.

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

Nous utilisons des promesses

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)

• Une promesse n'est tenue qu'une seule fois (succès ou échec). Il ne peut pas être exécuté deux fois ou passer de la réussite à l'échec ou vice versa une fois l'opération terminée.
• Si la promesse est terminée et que nous ajoutons une fonction de rappel pour traiter son résultat, cette fonction sera appelée, malgré le fait que l'événement se soit produit avant l'ajout de la fonction.

Syntaxe de base des promesses: un exemple réel

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)

Réponse d'échec

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

Fusion de blocs

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

Promesse de conclusion terminologique

1. 1. Une promesse accomplie avec succès est appelée tenue. Il renvoie la valeur qui peut être obtenue via la chaîne à partir de .then () à la fin de la promesse. La fonction d'exécution dans le bloc .then () contient la valeur renvoyée par la promesse.
2. 2. Une promesse non remplie est appelée rejetée. Il renvoie la raison, le message d'erreur qui a conduit au rejet de la promesse. Cette raison peut être obtenue via le bloc .catch () à la fin de la promesse.

Exécutez le code après plusieurs promesses

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

• Premièrement, la deuxième promesse de retour dépend du type de valeur. Dans la fonction d'exécution, nous utilisons l'instruction if ... else if pour renvoyer la promesse en fonction du type de fichier que nous devons décoder (dans ce cas, nous choisissons entre blob et texte, mais l'exemple peut être facilement étendu pour fonctionner avec d'autres types).
• -, «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)

Exécutez le code après avoir rempli / rejeté la promesse

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

Rédiger votre propre promesse

Promesse du constructeur ()

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

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

timeoutPromise.then(alert)

Nous travaillons avec un rejet d'une promesse

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. Tout d'abord, nous vérifions le message. S'il est vide ou n'est pas une chaîne, nous rejetons la promesse et signalons une erreur.
2. Deuxièmement, nous vérifions le délai. S'il s'agit d'un nombre négatif ou non, nous rejetons également la promesse et signalons une erreur.
3. Enfin, si les deux arguments sont OK, affichez le message après un certain temps (intervalle) à l'aide de setTimeout ().

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

Exemple plus réaliste.

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

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

• Lorsque la demande aboutit , le gestionnaire onsuccess remplit la promesse avec le résultat de la demande.
• Lorsque la demande échoue , le gestionnaire onerror rejette la promesse avec l'erreur de la demande.

Conclusion