成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript Promise 告別異步亂嵌套

Ryan_Li / 2574人閱讀

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

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

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

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

說(shuō)到這里，我真有點(diǎn)想去了解一下響馬老師的fibjs，我沒(méi)有接觸過(guò)它，但它的編程方式就是線性的，更加符合常人思維。我個(gè)人認(rèn)為Promise就是為了把JS復(fù)雜的嵌套轉(zhuǎn)換成常人思維的線性代碼。
// 就像下面這樣：
// 你不在乎下面這三個(gè)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");


// 下面是我最近寫(xiě)的一段Node.js的代碼
// 其實(shí)這個(gè)嵌套也不算多
// 如果業(yè)務(wù)邏輯相當(dāng)復(fù)雜起來(lái)呢？
// 嵌套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
          }
        });
      });
    });
  });
};
說(shuō)了這么多，到底什么是Promise呢？

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

那Promise怎么用呢？

看一段很簡(jiǎn)單的代碼，請(qǐng)注意閱讀代碼中的注釋。

var val = 1;

// 我們假設(shè)step1, step2, step3都是ajax調(diào)用后端或者是
// 在Node.js上查詢數(shù)據(jù)庫(kù)的異步操作
// 每個(gè)步驟都有對(duì)應(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í)行之后將會(huì)打印
步驟一：執(zhí)行
Hello I am No.1
步驟二：執(zhí)行
Hello I am No.2
步驟三：執(zhí)行
Hello I am No.3
Hello I am No.3
Promise到底解決什么問(wèn)題？ 
正如上面代碼所示，筆者認(rèn)為，Promise的意義就在于  then 鏈?zhǔn)秸{(diào)用 ，它避免了異步函數(shù)之間的層層嵌套，將原來(lái)異步函數(shù)的 嵌套關(guān)系 轉(zhuǎn)變?yōu)楸阌陂喿x和理解的 鏈?zhǔn)讲襟E關(guān)系 。

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

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

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

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

在then方法中通常傳遞兩個(gè)參數(shù)，一個(gè) resolve 函數(shù)，一個(gè) reject 函數(shù)。reject暫時(shí)不討論，就是出錯(cuò)的時(shí)候運(yùn)行的函數(shù)罷了。resolve 函數(shù)必須返回一個(gè)值才能把鏈?zhǔn)秸{(diào)用進(jìn)行下去，而且這個(gè)值返回什么是有很大講究的。

resolve 返回一個(gè)新 Promise

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

resolve 返回一個(gè)值

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/85411.html

相關(guān)文章

  • JavaScript Promise 告別異步亂嵌套

    摘要：回調(diào)函數(shù)少了還好，一旦多了起來(lái)而且必須講究執(zhí)行順序的話，回調(diào)函數(shù)開(kāi)始嵌套，那代碼的惡心程度是相當(dāng)不符合常人的線性思維的。 什么是Promise? 在說(shuō)Promise之前, 不得不說(shuō)一下,JavaScript的嵌套的回調(diào)函數(shù) 在JavaScript語(yǔ)言中, 無(wú)論是寫(xiě)瀏覽器端的各種事件回調(diào)、ajax回調(diào)，還是寫(xiě)Node.js上的業(yè)務(wù)邏輯，不得不面對(duì)的問(wèn)題就是各種回調(diào)函數(shù)?；卣{(diào)函數(shù)少了還好，...

    Mr_houzi 評(píng)論0 收藏0

  • 終極蛇皮上帝視角之微信小程序之告別 setData

    摘要：而小程序官方的是在中調(diào)用方法來(lái)改變數(shù)據(jù)，從而改變界面。為了寫(xiě)測(cè)試讓咱們來(lái)重構(gòu)一把，利用學(xué)習(xí)過(guò)的函數(shù)式編程中的高階函數(shù)把依賴注入。也就是說(shuō)當(dāng)中的某個(gè)數(shù)據(jù)更新的時(shí)候，我們并不知道它會(huì)影響哪個(gè)中的屬性，特別的還有依賴于的情況。 眾所周知 Vue 是借助 ES5 的 Object.defineProperty 方法設(shè)置 getter、setter 達(dá)到數(shù)據(jù)驅(qū)動(dòng)界面，當(dāng)然其中還有模板編譯等等其他...

    wuyumin 評(píng)論0 收藏0

  • Async/Await替代Promise的6個(gè)理由

    摘要：是基于實(shí)現(xiàn)的，它不能用于普通的回調(diào)函數(shù)。憂慮對(duì)于，也許你有一些合理的懷疑它使得異步代碼不再明顯我們已經(jīng)習(xí)慣了用回調(diào)函數(shù)或者來(lái)識(shí)別異步代碼，我們可能需要花數(shù)個(gè)星期去習(xí)慣新的標(biāo)志。 譯者按： Node.js的異步編程方式有效提高了應(yīng)用性能；然而回調(diào)地獄卻讓人望而生畏，Promise讓我們告別回調(diào)函數(shù)，寫(xiě)出更優(yōu)雅的異步代碼；在實(shí)踐過(guò)程中，卻發(fā)現(xiàn)Promise并不完美；技術(shù)進(jìn)步是無(wú)止境的，這時(shí)...

    tuomao 評(píng)論0 收藏0

  • ES6-7

    摘要：的翻譯文檔由的維護(hù)很多人說(shuō)，阮老師已經(jīng)有一本關(guān)于的書(shū)了入門(mén)，覺(jué)得看看這本書(shū)就足夠了。前端的異步解決方案之和異步編程模式在前端開(kāi)發(fā)過(guò)程中，顯得越來(lái)越重要。為了讓編程更美好，我們就需要引入來(lái)降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書(shū)（中文版） 超詳細(xì)介紹promise的gitbook，看完再不會(huì)promise...... 本書(shū)的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評(píng)論0 收藏0

  • 異步解決方案----Promise與Await

    摘要：前言異步編程模式在前端開(kāi)發(fā)過(guò)程中，顯得越來(lái)越重要。隨著新標(biāo)準(zhǔn)的到來(lái)，處理異步數(shù)據(jù)流又有了新的方案。接下來(lái)我們介紹這兩種處理異步編程的方案。仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄。使得異步代碼看起來(lái)像同步代碼，再也沒(méi)有回調(diào)函數(shù)。 前言 異步編程模式在前端開(kāi)發(fā)過(guò)程中，顯得越來(lái)越重要。從最開(kāi)始的XHR到封裝后的Ajax都在試圖解決異步編程過(guò)程中的問(wèn)題。隨著ES6新標(biāo)準(zhǔn)的到來(lái)，處理異步數(shù)據(jù)流又有了新...

    Blackjun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<