提醒：本文最後更新於 1337 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

ThinkJS 是奇舞團開源的一款 Node MVC 框架，主要由 welefen 開發。簡單介紹一下：

ThinkJS 是一個快速、簡單的基於 MVC 和麵向物件的輕量級 Node.js 開發框架，遵循 MIT 協議釋出。秉承簡潔易用的設計原則，在保持出色的效能和至簡的程式碼同時，注重開發體驗和易用性，為 WEB 應用開發提供強有力的支援。

ThinkJS 借鑑了很多 ThinkPHP 的特性，同時結合 Node.js 的特性，使用了 ES6 Promise，讓非同步程式設計更加簡單、方便。via

我是 ThinkJS 的第一批使用者，大約在 2014 年初，我把我的部落格程式用 ThinkJS 重新實現了一遍，前後花了不到一週。之後的這一年多，我用 ThinkJS 寫過大大小小很多個系統和工具，越用越覺得好用，現在已經完全離不開了。

今天這篇部落格我準備聊聊 ThinkJS 中的非同步程式設計方式以及我採用的方案。

前面介紹中提到過，ThinkJS 是基於 Promise 實現的非同步程式設計。我之前寫的那篇「非同步程式設計：When.js 快速上手」已經比較詳細的介紹了 Promise 相關知識。直接看一段摘自於我部落格程式的程式碼：

indexAction : function() {
    var instance = this;
    return D('Post')
        .getPostList(this.get('pn'), 10)
        .then(function(data) {
            data.pagerPath = getPagerPath(instance.http);
            data.currentPage = 'blog-home'
 
;

            instance.assign(data);
            instance.display('Blog/theme/' + theme + '/post_list.html');
        });
}

這段程式碼中 getPostList 是一個查詢資料庫的非同步操作，它的返回值在 then 中才可以拿到。如果 then 中還有其他非同步操作，最後還是會導致巢狀很深。這段程式碼還會遇到經典的 this 指標問題，需要賦值儲存或者用 bind 解決。這段程式碼能不能實現得更優雅一點呢？我們先來看另一段：

async function myFunction
 
() {
    let result = await somethingThatReturnsAPromise();
    console.log(result); // cool, we have a result
}

這樣寫非同步邏輯，是不是很贊？既好看又好懂，也沒有 this 指標問題。實際上，這是 ES7 裡的 async function，還得等一陣子才能用。

之前我在介紹 ES6 的生成器函式（generator function）時，曾經舉過一個生成器函式結合 Promise 使用的例子，下面摘錄一段（全文在這裡）：

var all = Q.async(function* () {
    var src = yield getData();
    var img = yield getImg(src);
    showImg(img);
});

有沒發現這段程式碼跟上面的 async function 非常像？沒錯！利用生成器函式和 Q 框架，可以方便地把 Promise 巢狀變成平級，這一切現在就能用！

在繼續之前，請通過 node -v 檢查下 Node 版本，推薦升級到最新的 0.12。對於 Ubuntu 系統，可以這樣安裝最新的 0.12：

curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -
sudo apt-get install -y nodejs

有了最新的 Node，在使用 Node 命令時，還需要帶上 --harmony 引數，例如啟動 ThinkJS：

node --harmony www/index.js

如果用 PM2 啟動程式，也需要帶上這個引數，例如：

pm2 start ~/www/blog/www/index.js -n blog --node-args="--harmony"

安裝並引入 Q 模組之後，就可以開始改造本文第一段程式碼了：

indexAction : Q.async(function* () {
    var data = yield D('Post').getPostList(this.get('pn'), 10);

    data.pagerPath = getPagerPath(this.http);
    data.currentPage = 'blog-home';

    this.assign(data);
    this.display('Blog/theme/' + theme + '/post_list.html');
})

這下，程式碼是不是更清晰明瞭。改動不大，但效果很明顯，上面提出的問題都解決了。

這裡有個小點需要注意下：如果你使用了 ThinkJS 的 Action 引數自動繫結功能，例如這樣：

tagAction : function(tag) {
    return D('Post')
        .getPostListByTag(tag, this.get('pn'), 10)
        .then(function(data) {
            ...
        });
}

改造之後，需要通過 this.get('tag') 獲取引數值：

tagAction : Q.async(function* () {
    var tag = this.get('tag');
    var data = yield D('Post').getPostListByTag(tag, this.get('pn'), 10);
    ...
})

因為 ThinkJS 的引數自動繫結依賴 function.toString，應該沒匹配生成器函式格式。當然下面這樣寫也可以，只是更復雜：

tagAction : function (tag) {
    return Q.spawn(function* (){
        var data = yield D('Post').getPostListByTag(tag, this.get('pn'), 10);
        ...
    }.bind(this));
}

Q.async 和 Q.spawn 的文件在這裡可以找到。主要區別是 Q.async 返回等待執行的函式；Q.spawn 會立即執行。

最後放上一大段程式碼結束本文，這是我的部落格詳情頁實現程式碼：

postAction : Q.async(function* () {
    var Post = D('Post');

    var slugOrId = this.get('slugOrId');
    var post = yield Post.getPost(slugOrId);

    //不存在的文章，重定向到首頁
    if(!post) {
        return this.redirect('/');
    } 

    //未公開的文章，非登入使用者訪問時重定向到首頁
    if(post.status != 'publish') {
        var user = yield this.session('user');
        if(isEmpty(user)) {
            return this.redirect('/');
        }
    }

    //如果有 slug，但是用 id 訪問，301 到更友好的 url
    var slug = post.slug;
    if(slug && slug != slugOrId) {
        return this.redirect(format('/post/%s.html', slug), 301);
    }

    var data = {};

    //獲取上一篇、下一篇
    var prevPost = Post.getPrevPost(post.pub_date);
    var nextPost = Post.getNextPost(post.pub_date);
    var morePost = yield Promise.all([prevPost, nextPost]);

    data.prevPost = isEmpty(morePost[0]) ? false : morePost[0];
    data.nextPost = isEmpty(morePost[1]) ? false : morePost[1];

    //獲取 Toc
    var getTocResult = thinkRequire('TocApi')(post.content);
    post.content = getTocResult[0];

    data.toc = getTocResult[1];
    data.tocName = '文章目錄';

    data.currentPage = 'post-' + (post.slug || post.id);
    data.title = post.title + ' | ';

    data.post = post;

    this.assign(data);
    this.display('Blog/theme/' + theme + '/single_post.html');
})

注：後來我又把 Q 換成了 bluebird，bluebird 的 Promise.coroutine 和 Q.async 功能一樣，直接替換即可。

--EOF--

提醒：本文最後更新於 1337 天前，文中所描述的資訊可能已發生改變，請謹慎使用。