async/await

1. 異步回調 callback hell
2. promise then catch 鏈式調用，也是基於回調函數
3. async/await是同步語法，完全消滅回調函數

//promise加載圖片
function loadImg(src){
    new Promise((resolve,reject)=>{
        const img = document.createElement("img")
        img.onload = () => {
            resolve(img)
        }
        img.onerror = () => {
            const error = new Error(`圖片加載失敗${src}`)
            reject(error)
        }
        img.src = src
    })
}
const src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2111934553,104502141&fm=26&gp=0.jpg"

!(async function(){
    const img1 = await loadImg(src)
    console.log(img1.height,img1.width)
})()

async/await 和 promise的關係

async/await是消滅異步回調的終極武器

• 執行async函數，返回的是Promise對象
• await至關於Promise的then
• try...catch可捕獲異常，代替了Promise的catch

async function fn1(){
    return 100 ;   //至關於return Promise.resolve(100)
}
const  res1 = fun1() //執行async函數，返回一個Promise對象
console.log('res1',res1)
res1.then(data=>{
    console.log('data',data) //100
})

!(async function(){
    const p1 = Promise.resolve(300)
    const data = await p1
    console.log('data',data); //300
})()

!(async function(){
    const data1 = await fn1()
    console.log('data1',data1) //100
})()

!(async function(){
    const p4 = Promise.reject('err1')
    try{
        const res = await p4
        console.log(res) 
    } catch (ex) {
        console.error(ex)//err1
        //try...catch至關於promise的catch
    }
})()
  
  
!(async function(){
    const p5 = Promise.reject('err2')//rejected狀態->catch
    const data5 = await p5 //await至關於then
    console.log(data5)//控制器會報錯
})()