q 筆記一：異步編程入門

源碼github地址在此，記得點星：
https://github.com/brandonxiang/example-q

前言

大家都知道javascript的優點在于異步非阻塞。Javascript異步編程的4種方法指出javascript的單線程的特性和同步（Synchronous）異步（Asynchronous）的執行模式，并且說明了四種異步的方法，如今最重要的當然是Promises對象。

Promises對象是CommonJS工作組提出的一種規范，目的是為異步編程提供統一接口。

異步編程有著一個很大的效率優勢，但是異步多了就成為金字塔型的代碼結構非常不好閱讀，而且異步和同步的控制變得非常非常困難。

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

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

Promise在ES5實現

• q
• bluebird
• co
• when

q的詳細說明

其他幾個資源庫都應該大同小異，留給你們私下研究。

串行

then作為一個關鍵字，將函數async('first')和async('second')和async('third')和async('fourth')的順序分開，整體呈現完成第一個函數再完成第二個函數的序列操作。

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);
});

并行

并行要把對應的函數（async('a')和async('b')和async('c')）事先裝備在數組當中。用Q.all()對它們進行并行處理，也就是說這幾個函數將同時處理。

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

串并行混連

無論是先串后并，還是先并后串都可以。在并行程序Q.all(promises)后，加入then關鍵字，實現串并行混連，非常適合在拉取數據后對所有數據進行操作。

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

總結

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

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

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

現在異步編程的代碼是這樣的。

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();

轉載，請表明出處。總目錄前端經驗收集器