JavaScript Promise 告別異步亂嵌套

Mr_houzi 發(fā)布于2019-08-19 18:16 / 522人閱讀

摘要：回調(diào)函數(shù)少了還好，一旦多了起來而且必須講究執(zhí)行順序的話，回調(diào)函數(shù)開始嵌套，那代碼的惡心程度是相當(dāng)不符合常人的線性思維的。

什么是Promise? 在說Promise之前, 不得不說一下,JavaScript的嵌套的回調(diào)函數(shù)

在JavaScript語言中, 無論是寫瀏覽器端的各種事件回調(diào)、ajax回調(diào)，還是寫Node.js上的業(yè)務(wù)邏輯，不得不面對的問題就是各種回調(diào)函數(shù)。回調(diào)函數(shù)
少了還好，一旦多了起來而且必須講究執(zhí)行順序的話，回調(diào)函數(shù)開始嵌套，那代碼的惡心程度是相當(dāng)不符合常人的線性思維的。

個人認為Promise就是為了把JS復(fù)雜的嵌套轉(zhuǎn)換成常人思維的線性代碼。

// 就像下面這樣：
// 你不在乎下面這三個ajax的執(zhí)行順序還好
// 如果你在乎順序呢？
$.get("url", function(){
    
}, "json");
$.get("url1", function(){
    
}, "json");
$.get("url2", function(){
    
}, "json");

// 就像這樣？
$.get("url", function(){
    $.get("url1", function(){
        $.get("url2", function(){
    
        }, "json");
    }, "json");
}, "json");


// 下面是我最近寫的一段Node.js的代碼
// 其實這個嵌套也不算多
// 如果業(yè)務(wù)邏輯相當(dāng)復(fù)雜起來呢？
// 嵌套20 30層？
var adminIndex = function(params, callback){
  storeAdmin.getApiTokens(function(err, tokens){
    if ( err ) { callback(err); return; }
    storeAdmin.getApiServices(function(err, apiServices){
      if ( err ) { callback(err); return; }
      storeAdmin.getSocketioServices(function(err, socketioServices){
        if ( err ) { callback(err); return; }
        callback(0, {
          status : true,
          data : {
            api_tokens : tokens,
            api_services : apiServices,
            socketio_services : socketioServices
          }
        });
      });
    });
  });
};

說了這么多，到底什么是Promise呢？

其實， Promise就是一個類，而且這個類已經(jīng)成為ES6的標準，這個類目前在chrome32、Opera19、Firefox29以上的版本都已經(jīng)支持了，要想在所有瀏覽器上都用上的話就看看es6-promise吧。

那Promise怎么用呢？

那看一段很簡單的代碼，請注意閱讀代碼中的注釋。

var val = 1;

// 我們假設(shè)step1, step2, step3都是ajax調(diào)用后端或者是
// 在Node.js上查詢數(shù)據(jù)庫的異步操作
// 每個步驟都有對應(yīng)的失敗和成功處理回調(diào)
// 需求是這樣，step1、step2、step3必須按順序執(zhí)行
function step1(resolve, reject) {
    console.log("步驟一：執(zhí)行");
    if (val >= 1) {
        resolve("Hello I am No.1");
    } else if (val === 0) {
        reject(val);
    }
}

function step2(resolve, reject) {
    console.log("步驟二：執(zhí)行");
    if (val === 1) {
        resolve("Hello I am No.2");
    } else if (val === 0) {
        reject(val);
    }
}

function step3(resolve, reject) {
    console.log("步驟三：執(zhí)行");
    if (val === 1) {
        resolve("Hello I am No.3");
    } else if (val === 0) {
        reject(val);
    }
}

new Promise(step1)
    .then(function(val) {
        console.info(val);
        return new Promise(step2);
    })
    .then(function(val) {
        console.info(val);
        return new Promise(step3);
    })
    .then(function(val)  {
        console.info(val);
        return val;
    })
    .then(function(val) {
        console.info(val);
        return val;
    });

// 執(zhí)行之后將會打印
步驟一：執(zhí)行
Hello I am No.1
步驟二：執(zhí)行
Hello I am No.2
步驟三：執(zhí)行
Hello I am No.3
Hello I am No.3

Promise到底解決什么問題？

正如上面代碼所示，個人認為Promise的意義就在于then鏈式調(diào)用，他避免了異步函數(shù)之間的層層嵌套，將原來異步函數(shù)的嵌套函數(shù)轉(zhuǎn)變?yōu)楸阌陂喿x和理解的鏈式步驟關(guān)系。

Promise的主要用法就是將各個異步操作封裝成好多Promise，而一個Promise只處理一個異步操作。最后將各個Promise用鏈式調(diào)用寫法串聯(lián)，在這樣處理下，如果異步邏輯之間前后關(guān)系很重的話，你也不需要層層嵌套，只需要把每個異步邏輯封裝成Promise鏈式調(diào)用就可以了。

Promise常用的關(guān)鍵點 在Promise定義時，函數(shù)已經(jīng)執(zhí)行了

Promise構(gòu)造函數(shù)只接受一個參數(shù)，即帶有異步邏輯的函數(shù)，這個函數(shù)在new Promise時已經(jīng)執(zhí)行了。只不過在沒有調(diào)用then之前不會resolve或reject。

在then中的resolve方法中如何return？

在then方法中通常傳遞兩個參數(shù)，一個resolve函數(shù)，一個reject函數(shù)（暫時不討論，就是出錯時運行的函數(shù)罷了）。resolve函數(shù)必須返回一個值才能把鏈式調(diào)用進行下去，而且這個值返回什么是有很大講究的。

resolve返回一個新的Promise
返回一個新Promise之后再調(diào)用的then就是新的Promise中的邏輯了。

resolve返回一個值
返回一個值會傳遞到下一個then的resolve方法參數(shù)中。