具有承诺的优雅异步编程

什么是诺言？

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

回调函数问题

1. 选择馅料。如果您考虑了很长时间，这可能会花费一些时间；如果您改变主意并订购咖喱，这可能会失败。
2. 我们下订单。烹饪披萨需要一些时间，如果餐厅缺少必要的食材，可能会失败。
3. 我们吃披萨吃。例如，如果我们无法为订单付款，则接收比萨可能会失败。

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

我们用诺言

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)

• 一个承诺只能实现一次（成功或失败）。操作完成后，不能执行两次，也不能从成功切换为失败，反之亦然。
• 如果Promise已完成，并且我们添加了一个回调函数来处理其结果，则尽管该事件发生在添加函数之前，但仍将调用此函数。

基本的Promise语法：一个真实的例子

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)

失败反应

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

块合并

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

无条件术语结论

1. 1.成功完成诺言称为履行。它返回承诺末尾从.then（）通过链获得的值。.then（）块中的执行函数包含了promise返回的值。
2. 2.未成功完成的承诺称为拒绝。它返回原因，错误消息导致拒绝承诺。可以通过promise末尾的.catch（）块获得此原因。

在多个承诺后运行代码

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

• 首先，第二个回报承诺取决于价值的类型。在执行函数中，我们使用if ... else if语句根据需要解码的文件类型返回promise（在这种情况下，我们在blob和text之间进行选择，但是该示例可以轻松扩展为与其他类型一起使用）。
• -, «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)

兑现/拒绝诺言后运行代码

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

写下自己的承诺

构造函数承诺（）

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

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

timeoutPromise.then(alert)

我们拒绝承诺

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. 首先，我们检查消息。如果它为空或不是字符串，则我们拒绝承诺并报告错误。
2. 其次，我们检查时间延迟。如果它是负数或不是数字，那么我们也会拒绝承诺并报告错误。
3. 最后，如果两个参数都正确，则使用setTimeout（）在特定时间（间隔）后显示消息。

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

更现实的例子。

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

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

• 当请求成功时，成功处理程序将根据请求的结果来履行承诺。
• 当请求失败时，onerror处理程序将拒绝带有错误请求的promise。

结论