q 筆記一:異步編程入門

q 筆記一:異步編程入門

源碼github地址在此,記得點(diǎn)星:
https://github.com/brandonxiang/example-q

前言

大家都知道javascript的優(yōu)點(diǎn)在于異步非阻塞。Javascript異步編程的4種方法指出javascript的單線程的特性和同步(Synchronous)異步(Asynchronous)的執(zhí)行模式,并且說明了四種異步的方法,如今最重要的當(dāng)然是Promises對(duì)象。

Promises對(duì)象是CommonJS工作組提出的一種規(guī)范,目的是為異步編程提供統(tǒng)一接口。

異步編程有著一個(gè)很大的效率優(yōu)勢(shì),但是異步多了就成為金字塔型的代碼結(jié)構(gòu)非常不好閱讀,而且異步和同步的控制變得非常非常困難。

$.getJSON('./api', function(data){
    console.log(data);
    $.getJSON('./api', function(data){
        console.log(data);
    }
})

這時(shí)候,我們需要Promise模式。這種模式其實(shí)在ES6已經(jīng)得到官配,參考Javascript 中的神器——Promise。但是有些人還停留在ES5的開發(fā),沒接觸node.js這時(shí)候,我們需要運(yùn)用一些第三方庫來控制異步的流程。

Promise在ES5實(shí)現(xiàn)

q的詳細(xì)說明

其他幾個(gè)資源庫都應(yīng)該大同小異,留給你們私下研究。

串行

then作為一個(gè)關(guān)鍵字,將函數(shù)async('first')async('second')async('third')async('fourth')的順序分開,整體呈現(xiàn)完成第一個(gè)函數(shù)再完成第二個(gè)函數(shù)的序列操作。

async('first').then(function (resp) {
      console.log(resp);
      return async('second');
}).then(function (resp) {
     console.log(resp);
     return async('third')
}).then(function (resp) {
     console.log(resp);
     return async('fourth');
}).then(function (resp) {
     console.log(resp);
});

并行

并行要把對(duì)應(yīng)的函數(shù)(async('a')async('b')async('c'))事先裝備在數(shù)組當(dāng)中。用Q.all()對(duì)它們進(jìn)行并行處理,也就是說這幾個(gè)函數(shù)將同時(shí)處理。

var promises = [];
promises.push(async('a'));
promises.push(async('b'));
promises.push(async('c'));
Q.all(promises);

串并行混連

無論是先串后并,還是先并后串都可以。在并行程序Q.all(promises)后,加入then關(guān)鍵字,實(shí)現(xiàn)串并行混連,非常適合在拉取數(shù)據(jù)后對(duì)所有數(shù)據(jù)進(jìn)行操作。

Q.all(promises).then(function(){
   console.log('hello world');
})

總結(jié)

最終,這筆記寫的像是物理電路一樣,引用q官方文檔的一段代碼。

以前異步編程的代碼是這樣的。

step1(function (value1) {
    step2(value1, function(value2) {
        step3(value2, function(value3) {
            step4(value3, function(value4) {
                // Do something with value4
            });
        });
    });
});

現(xiàn)在異步編程的代碼是這樣的。

Q.fcall(promisedStep1)
.then(promisedStep2)
.then(promisedStep3)
.then(promisedStep4)
.then(function (value4) {
    // Do something with value4
})
.catch(function (error) {
    // Handle any error from all above steps
})
.done();

轉(zhuǎn)載,請(qǐng)表明出處。總目錄前端經(jīng)驗(yàn)收集器

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 英文:Nolan Lawson 譯文:伯樂在線專欄作者 - abell123如有好文章投稿,請(qǐng)點(diǎn)擊 → 這里了解...
    北方蜘蛛閱讀 6,338評(píng)論 1 10
  • 異步編程對(duì)JavaScript語言太重要。Javascript語言的執(zhí)行環(huán)境是“單線程”的,如果沒有異步編程,根本...
    呼呼哥閱讀 7,404評(píng)論 5 22
  • 你不知道JS:異步 第三章:Promises 接上篇3-1 錯(cuò)誤處理(Error Handling) 在異步編程中...
    purple_force閱讀 1,495評(píng)論 0 2
  • 弄懂js異步 講異步之前,我們必須掌握一個(gè)基礎(chǔ)知識(shí)-event-loop。 我們知道JavaScript的一大特點(diǎn)...
    DCbryant閱讀 2,882評(píng)論 0 5
  • 我兒子的催眠曲是 《歌唱祖國》
    貓殿閱讀 208評(píng)論 0 0

友情鏈接更多精彩內(nèi)容