應(yīng)用場景

• 網(wǎng)絡(luò)請求，如ajax，圖片加載
• 定時任務(wù)，如setTimeout

Promise解決callback hell

function loadImg(src) {
    const p = new Promise(
        (resolve, reject) => {
            const img = document.createElement('img')
            img.onload = () => {
                resolve(img)
            }
            img.onerror = () => {
                const err = new Error(`圖片加載失敗 ${src}`)
                reject(err)
            }
            img.src = src
        }
    )
    return p
}

// loadImg(url).then(img => {
//     console.log(img.width)
//     return img
// }).then(img => {
//     console.log(img.height)
// }).catch(ex => console.error(ex))

const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'

loadImg(url1).then(img1 => {
    console.log(img1.width)
    return img1 // 普通對象
}).then(img1 => {
    console.log(img1.height)
    return loadImg(url2) // promise 實例
}).then(img2 => {
    console.log(img2.width)
    return img2
}).then(img2 => {
    console.log(img2.height)
}).catch(ex => console.error(ex))

1. Promise三種狀態(tài)

• pending resolved rejected

• pending——> resolved 或 pending——> rejected

• 變化不可逆

2. Promise狀態(tài)的表現(xiàn)

• pending狀態(tài)，不會觸發(fā)then和catch

• resolved狀態(tài)，會觸發(fā)后續(xù)的then回調(diào)函數(shù)

• rejected狀態(tài)，會觸發(fā)后續(xù)的catch回調(diào)函數(shù)

3. then和catch改變狀態(tài)

• then正常返回resolved，里面有報錯則返回rejected

• catch正常返回resolved，里面有報錯則返回rejected

場景題 - promise then和catch的連接

event loop（時間循環(huán)、事件輪詢）

1. 同步代碼，一行一行放在 Call Stack執(zhí)行

2. 遇到異步，會先“記錄”，等待時機（定時、網(wǎng)絡(luò)請求等）

3. 時機到了，就移動到Callback Queue

4. 如 Call Stack 為空（即同步代碼執(zhí)行完）Event Loop開始工作

5. 輪詢查找Callback Queue，如有則移動到Call Stack執(zhí)行

6. 然后繼續(xù)輪詢查找（永動機一樣）

   
   
   
   

async/await和Promise的關(guān)系

async/await是語法糖，本質(zhì)還是回調(diào)函數(shù)

• 執(zhí)行async函數(shù)，返回的是Promise對象

• await相當(dāng)于Promise的then（await后面的代碼相當(dāng)于執(zhí)行異步回調(diào)）

• try...catch可捕獲異常，代替了Promise的catch

for - of的 應(yīng)用場景： 實現(xiàn)異步遍歷

宏任務(wù) macroTask 和微任務(wù) microTask

• 宏任務(wù)： setTimeout，setInterval，Ajax，DOM事件
• 微任務(wù)： Promise async/await
  微任務(wù)執(zhí)行時機比宏任務(wù)早

1. event-loop和DOM渲染的關(guān)系

Call Stack空閑時，就會嘗試DOM渲染，然后觸發(fā)event loop，再執(zhí)行Callback Queue里的代碼，再嘗試DOM渲染，如此循環(huán)

2. 微任務(wù)和宏任務(wù)的區(qū)別

• 宏任務(wù)： DOM渲染后觸發(fā)，如setTimeout
• 微任務(wù)： DOM渲染前觸發(fā)，如Promise

3. 微任務(wù)和宏任務(wù)的根本區(qū)別

• 宏任務(wù)是由瀏覽器規(guī)定的，微任務(wù)是由ES6語法規(guī)定的
• 執(zhí)行順序：
  1. 同步代碼執(zhí)行完
  2. 執(zhí)行當(dāng)前的微任務(wù)（微任務(wù)不放在Web APIs里，放在micro task queue里）
  3. 嘗試DOM渲染
  4. 觸發(fā)event loop