一、回調(diào)地獄

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

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

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

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

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

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

（1）可讀性差、維護困難

（2）無法進行return和throw

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

二、Promise對象

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

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

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

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

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

2、執(zhí)行過程

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

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

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

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

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

Promise(reslove,reject)

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

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

4、Promise的all方法：實現(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對象的缺陷：雖然跳出了回調(diào)地獄，但是在流程復(fù)雜的代碼中會出現(xiàn)很多的then，這樣會導(dǎo)致代碼的可讀性差。

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

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

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

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

（2）await后面可以直接跟一個Promise對象（更多的是跟一個返回Promise對象的表達式）

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

（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）對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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！