JavaScript Promise 告別異步亂嵌套

Ryan_Li 發布于2019-08-21 10:22 / 2519人閱讀

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

這是我的原創文章，原文地址：http://lpgray.me/article/43/

什么是Promise? 在說Promise之前，不得不說一下JavaScript的嵌套的回調函數

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

說到這里，我真有點想去了解一下響馬老師的fibjs，我沒有接觸過它，但它的編程方式就是線性的，更加符合常人思維。我個人認為Promise就是為了把JS復雜的嵌套轉換成常人思維的線性代碼。

// 就像下面這樣：
// 你不在乎下面這三個ajax的執行順序還好
// 如果你在乎順序呢？
$.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的代碼
// 其實這個嵌套也不算多
// 如果業務邏輯相當復雜起來呢？
// 嵌套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就是一個類，而且這個類已經成為了ES6的標準，這個類目前在chrome32、Opera19、Firefox29以上的版本都已經支持了，要想在所有瀏覽器上都用上的話就看看es6-promise吧。

那Promise怎么用呢？

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

var val = 1;

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

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

function step3(resolve, reject) {
    console.log("步驟三：執行");
    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;
});

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

Promise到底解決什么問題？

正如上面代碼所示，筆者認為，Promise的意義就在于 then 鏈式調用 ，它避免了異步函數之間的層層嵌套，將原來異步函數的 嵌套關系 轉變為便于閱讀和理解的 鏈式步驟關系 。

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

Promise常用的關鍵點 在Promise定義時，函數已經執行了

Promise構造函數只接受一個參數，即帶有異步邏輯的函數。這個函數在 new Promise 時已經執行了。只不過在沒有調用 then 之前不會 resolve 或 reject。

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

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

resolve 返回一個新 Promise

返回一個新Promise之后再調用的then就是新Promise中的邏輯了。

resolve 返回一個值

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

云服務器 GPU云服務器 jquery_promise異步嵌套循環javascript javascript異步函數 JavaScript異步機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85411.html

JavaScript Promise 告別異步亂嵌套

摘要：回調函數少了還好，一旦多了起來而且必須講究執行順序的話，回調函數開始嵌套，那代碼的惡心程度是相當不符合常人的線性思維的。什么是Promise? 在說Promise之前, 不得不說一下,JavaScript的嵌套的回調函數在JavaScript語言中, 無論是寫瀏覽器端的各種事件回調、ajax回調，還是寫Node.js上的業務邏輯，不得不面對的問題就是各種回調函數。回調函數少了還好，...

Mr_houzi 2019-08-19 18:16 評論0 收藏0
終極蛇皮上帝視角之微信小程序之告別 setData

摘要：而小程序官方的是在中調用方法來改變數據，從而改變界面。為了寫測試讓咱們來重構一把，利用學習過的函數式編程中的高階函數把依賴注入。也就是說當中的某個數據更新的時候，我們并不知道它會影響哪個中的屬性，特別的還有依賴于的情況。眾所周知 Vue 是借助 ES5 的 Object.defineProperty 方法設置 getter、setter 達到數據驅動界面，當然其中還有模板編譯等等其他...

wuyumin 2019-08-23 10:58 評論0 收藏0
Async/Await替代Promise的6個理由

摘要：是基于實現的，它不能用于普通的回調函數。憂慮對于，也許你有一些合理的懷疑它使得異步代碼不再明顯我們已經習慣了用回調函數或者來識別異步代碼，我們可能需要花數個星期去習慣新的標志。譯者按： Node.js的異步編程方式有效提高了應用性能；然而回調地獄卻讓人望而生畏，Promise讓我們告別回調函數，寫出更優雅的異步代碼；在實踐過程中，卻發現Promise并不完美；技術進步是無止境的，這時...

tuomao 2019-08-20 15:34 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
異步解決方案----Promise與Await

摘要：前言異步編程模式在前端開發過程中，顯得越來越重要。隨著新標準的到來，處理異步數據流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續執行，但執行結果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調函數。前言異步編程模式在前端開發過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標準的到來，處理異步數據流又有了新...

Blackjun 2019-08-29 16:56 評論0 收藏0