一、回調(diào)地獄

1、回調(diào)函數(shù)：把一個(gè)函數(shù)作為參數(shù)傳遞給另一個(gè)函數(shù)，在另一個(gè)函數(shù)中作為參數(shù)的函數(shù)不會(huì)立即執(zhí)行，只有當(dāng)滿足某個(gè)條件后才會(huì)執(zhí)行，這個(gè)函數(shù)稱為回調(diào)函數(shù)。

2、同步任務(wù)：主線程中的程序依次排列，只有當(dāng)前一個(gè)任務(wù)執(zhí)行結(jié)束后才會(huì)執(zhí)行后一個(gè)任務(wù)。

3、異步任務(wù)：不會(huì)進(jìn)入主線程隊(duì)列，它會(huì)進(jìn)入異步的隊(duì)列。前一個(gè)任務(wù)是否執(zhí)行完畢不影響下一個(gè)任務(wù)的執(zhí)行。

異步任務(wù)又稱為不阻塞任務(wù)。

3、回調(diào)地獄：回調(diào)函數(shù)嵌套回調(diào)函數(shù)就會(huì)形成回調(diào)地獄

4、回調(diào)地獄的缺點(diǎn)

（1）可讀性差、維護(hù)困難

（2）無(wú)法進(jìn)行return和throw

（3）多個(gè)回調(diào)之間無(wú)法建立練習(xí)

二、Promise對(duì)象

promise：是一個(gè)原生的js對(duì)象，為了解決回調(diào)地獄問題，可以替換掉回調(diào)函數(shù)。是一個(gè)新的異步任務(wù)的解決方案。

1、promise的三種狀態(tài)

（1）pending[待定] 初始狀態(tài)

（2）resloved[實(shí)現(xiàn)] 操作成功

（3）reject[被否決] 操作失敗

2、執(zhí)行過程

（1）當(dāng)promise對(duì)象的狀態(tài)發(fā)生改變時(shí)就會(huì)觸發(fā)后面的.then()里的響應(yīng)函數(shù)處理后續(xù)步驟

（2）狀態(tài)一經(jīng)改變，不會(huì)再變

（3）promise實(shí)例對(duì)象一經(jīng)創(chuàng)建，就會(huì)立即執(zhí)行

注：promise對(duì)象之所以可以連續(xù)的.then是因?yàn)?then里面的回調(diào)函數(shù)的返回值也是一個(gè)promise對(duì)象。

3、構(gòu)造函數(shù)

Promise(reslove,reject)

reslove：表示異步操作成功后的函數(shù)，將promise對(duì)象的狀態(tài)由初始化狀態(tài)轉(zhuǎn)換到成功，并將函數(shù)的執(zhí)行結(jié)果傳遞出去，由下一個(gè)then接收

reject:表示異步操作失敗后的回調(diào)函數(shù)，在回調(diào)函數(shù)執(zhí)行錯(cuò)誤時(shí)，并將錯(cuò)誤的信息作為參數(shù)傳遞出去，由catch來(lái)接收。

4、Promise的all方法：實(shí)現(xiàn)了異步任務(wù)并行執(zhí)行能力

function getWidth() { 
    return new Promise((resolve,reject)=>{
        setTimeout(resolve(5),1000)
    })
}
function getHight(){
    return new Promise((resolve,reject)=>{
        setTimeout(resolve(4),1000)
    })
}
Promise.all([getWidth(),getHight()]).then((result)=>{
    console.log('result:',result);
})

三、syn函數(shù)和await函數(shù)

1、Promise對(duì)象的缺陷：雖然跳出了回調(diào)地獄，但是在流程復(fù)雜的代碼中會(huì)出現(xiàn)很多的then，這樣會(huì)導(dǎo)致代碼的可讀性差。

2、async/await出現(xiàn)的原因：是對(duì)Promise的一種優(yōu)化，又稱為Promise的語(yǔ)法糖。

var sleep = function(time){
    return new Promise((resolve,reject)=>{
        setTimeout(function () { 
            resolve();
         },time)
})
}
var start = async function(){  //異步調(diào)用,實(shí)現(xiàn)同步效果
    console.log('start')
    await sleep(3000).then((data)=>{
        console.log('end')
    })   
} 
start();

2、asyns/await的使用規(guī)則

（1）await關(guān)鍵字只能在asyc標(biāo)識(shí)的函數(shù)中使用

（2）await后面可以直接跟一個(gè)Promise對(duì)象（更多的是跟一個(gè)返回Promise對(duì)象的表達(dá)式）

（3）await函數(shù)不能單獨(dú)使用

（4）await可以直接拿到promise中resolve中的數(shù)據(jù)

4、promise和async/await區(qū)別

（1）promise是ES6中出現(xiàn)，async/await是在ES7中出現(xiàn)的

（2）async/await的寫法更優(yōu)雅

（3）對(duì)reject狀態(tài)的捕捉方式不同

• promise采用.then后面跟.catch方法捕捉，通常.catch放在最后
• async/await可以用.then后面跟.catch方法捕捉，也可以用try...catch方法捕捉

到此這篇關(guān)于淺析JavaScript中回調(diào)地獄與asyn函數(shù)和await函數(shù)原理的文章就介紹到這了,更多相關(guān)JS回調(diào)地獄與asyn函數(shù)和await函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論