Elegante asynchrone Programmierung mit Versprechen

Was sind Versprechen?

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

Rückruffunktionen Problem

1. Wählen Sie die Füllung. Dies kann einige Zeit dauern, wenn Sie lange darüber nachdenken, und kann fehlschlagen, wenn Sie Ihre Meinung ändern und ein Curry bestellen.
2. Wir geben eine Bestellung auf. Das Kochen von Pizza dauert einige Zeit und kann fehlschlagen, wenn dem Restaurant die erforderlichen Zutaten fehlen.
3. Wir bekommen Pizza und essen. Der Empfang von Pizza kann fehlschlagen, wenn wir beispielsweise die Bestellung nicht bezahlen können.

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

Wir verwenden Versprechen

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)

• Ein Versprechen wird nur einmal erfüllt (Erfolg oder Misserfolg). Es kann nicht zweimal ausgeführt werden oder nach Abschluss des Vorgangs von Erfolg zu Misserfolg oder umgekehrt wechseln.
• Wenn das Versprechen erfüllt ist und wir eine Rückruffunktion hinzufügen, um das Ergebnis zu verarbeiten, wird diese Funktion aufgerufen, obwohl das Ereignis vor dem Hinzufügen der Funktion aufgetreten ist.

Grundlegende Versprechenssyntax: ein echtes Beispiel

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)

Fehlerreaktion

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

Blockzusammenführung

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

Promise Terminologie Schlussfolgerungen

1. 1. Ein erfolgreich abgeschlossenes Versprechen wird als erfüllt bezeichnet. Es gibt den Wert zurück, der über die Kette von .then () am Ende des Versprechens erhalten werden kann. Die ausführende Funktion im Block .then () enthält den vom Versprechen zurückgegebenen Wert.
2. 2. Ein nicht erfolgreich abgeschlossenes Versprechen wird als abgelehnt bezeichnet. Es gibt den Grund zurück, die Fehlermeldung, die zur Ablehnung des Versprechens geführt hat. Dieser Grund kann über den Block .catch () am Ende des Versprechens ermittelt werden.

Führen Sie den Code nach mehreren Versprechungen aus

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

• Erstens hängt das zweite Rückgabeversprechen von der Art des Wertes ab. Innerhalb der ausführenden Funktion verwenden wir die if ... else if-Anweisung, um das Versprechen abhängig vom Dateityp zurückzugeben, den wir dekodieren müssen (in diesem Fall wählen wir zwischen Blob und Text, aber das Beispiel kann leicht erweitert werden, um mit anderen Typen zu arbeiten).
• -, «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)

Führen Sie den Code aus, nachdem Sie das Versprechen erfüllt / abgelehnt haben

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

Schreiben Sie Ihr eigenes Versprechen

Konstruktor Versprechen ()

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

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

timeoutPromise.then(alert)

Wir arbeiten mit der Ablehnung eines Versprechens

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. Zuerst überprüfen wir die Nachricht. Wenn es leer ist oder keine Zeichenfolge ist, lehnen wir das Versprechen ab und melden einen Fehler.
2. Zweitens überprüfen wir die Zeitverzögerung. Wenn es eine negative oder keine Zahl ist, lehnen wir das Versprechen ebenfalls ab und melden einen Fehler.
3. Wenn beide Argumente in Ordnung sind, zeigen Sie die Nachricht nach einer bestimmten Zeit (Intervall) mit setTimeout () an.

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

Realistischeres Beispiel.

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

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

• Wenn die Anforderung erfolgreich ist , erfüllt der Onsuccess-Handler das Versprechen mit dem Ergebnis der Anforderung.
• Wenn die Anforderung fehlschlägt , lehnt der Onerror-Handler das Versprechen mit dem Fehler der Anforderung ab.

Fazit