淺析JavaScript中回調地獄與asyn函數(shù)和await函數(shù)原理

更新時間：2023年01月10日 15:05:15 作者：禿頭小宋s

這篇文章主要介紹了JavaScript中回調地獄與asyn函數(shù)和await函數(shù)原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧

一、回調地獄

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

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

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

異步任務又稱為不阻塞任務。

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

4、回調地獄的缺點

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

（2）無法進行return和throw

（3）多個回調之間無法建立練習

二、Promise對象

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

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

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

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

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

2、執(zhí)行過程

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

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

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

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

3、構造函數(shù)

Promise(reslove,reject)

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

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

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

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(){  //異步調用,實現(xiàn)同步效果
    console.log('start')
    await sleep(3000).then((data)=>{
        console.log('end')
    })   
} 
start();

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

（1）await關鍵字只能在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)的捕捉方式不同