JS異步的幾種寫法

JavaScript的單線程決定了其解決併發問題的異步特性。

最直接的回調寫法，會形成難以維護的callback hell，JS的發展一直在追尋着以"程序員寫起來更容易"爲目標的異步寫法。 解決方案有好幾個，由於多，功能又同樣，還能混雜在一塊兒，就會亂。

這裏以一個實例爲線索，來探究各寫法的異同與思想。

實例

寫一個函數，讀文件file1.txt於字符串str1, 拿到file1以後讀文件file2.txt於字符串str2，拿到str1+str2後，傳給最終處理函數。

回調函數寫法

var fs = require('fs')
var log = console.log.bind(console)

// callback hell
function two_str_callback(callback) {
    fs.readFile('file1.txt', function (err, data) {
    if (err) {
        console.log(err)
    }

    var str1 = data.toString()
    fs.readFile('file2.txt', function (err, data2) {
        if (err) {
            console.log(err)
        }
        var str2 = data2.toString()
        callback(str1+str2)

        })
    })
}


two_str_callback(log)
複製代碼

事件發佈訂閱模式

此處使用eventproxy庫。

var fs = require('fs')
var eventproxy = require('eventproxy')
var log = console.log.bind(console)

function two_str_eventproxy(callback) {
    var ep = new eventproxy()
    ep.all('data1_event', 'data2_event', function (data1, data2) {
        callback(data1+data2)
    })
    fs.readFile('file1.txt', function (err, data) {
        if (err) {
            log(err)
        }
        ep.emit('data1_event', data.toString())
    })
    fs.readFile('file2.txt', function (err, data) {
        if (err) {
            log(err)
        }
        ep.emit('data2_event', data.toString())
    })
}

two_str_eventproxy(log)
複製代碼

能夠看到，這種寫法避免了fs裏再套一層fs，阻止了代碼橫向發展。 但此種寫法代碼運行是跳躍的，emit 'data2_event'後，控制會調回ep.all()處，會讓人想起goto這個壞東西，在維護與調試上仍有一些難度。

Promise

var fs = require('fs')
var log = console.log.bind(console)
var Promise = require('bluebird')

function two_str_promise(callback) {
    var err_log = function (value) {
        log('err_log:')
        return console.log.bind(console)(value)
    }
    var concat_str = new Promise(function (resolve, reject) {
        fs.readFile('file1.txt', function (err, data) {
            if (err) {
                reject('err happen in file1');
            } else {
                resolve(data.toString())
            }
        })
    })
    concat_str.then(function (value) {
        return new Promise(function (resolve, reject) {
            fs.readFile('file2.txt', function (err, data) {
                if (err) {
                    reject('err happen in file2')
                } else {
                    resolve(value+data.toString())
                }
            })
        })
    }).then(log).catch(err_log)
}

two_str_promise(log)
複製代碼

使用Promise寫法，代碼是根據正常思惟向下發展，而且沒有引入像eventproxy那樣的跳躍代碼。 缺點也很明顯，這麼寫感受上實在是太麻煩了。

async庫

注意，這裏的async庫與下面將要提到的async語法糖所指並非一個東西。

var async_lib = require('async')

function two_str_async_lib(callback) {
    async_lib.waterfall(
        [
            function (done) {
                fs.readFile('file1.txt', function (err, data) {
                    if (err) {
                        log(err)
                    } else {
                        done(null, data.toString())
                    }
                })
            },
            function (result, done) {
                fs.readFile('file2.txt', function (err, data) {
                    if (err) {
                        log(err)
                    } else {
                        done(null, result+data.toString())
                    }
                })
            }
        ], function (err, result) {
            if (err) {
                log(err)
            } else {
                callback(result)
            }
        }
    )
}

two_str_async_lib(log)

複製代碼

這種寫法嘛~，就比較寫意了，api的名字也頗有趣兒。 該庫還提供了不少處理各類異步情景的api。

generator

var fs = require('fs')
var log = console.log.bind(console)

function readfile(file_name) {
    fs.readFile(file_name, function (err, data) {
        it.next(data.toString())
    })
}


function* two_str_generator (callback) {
    var str1 = yield readfile('file1.txt')
    var str2 = yield readfile('file2.txt')
    callback(str1+str2)
}


var it = two_str_generator(log)

it.next()
複製代碼

使用generator的寫法的意義在於two_str_generator函數中能夠用同步的思路清楚地表達思路，即先拿str1, 再拿str2，以後加和這樣一個邏輯。

關鍵點在於readfile函數中直接調用it，函數做用域及變量提高的關係，在它被調用時，它知道it是一個generator。傳入讀到的數據後傳給next做爲參數便可被str1,str2獲得。

缺點是two_str_generator的調用者，被分散開來，一個是從最外層發起，另外一個則是處於readfile這麼一個函數中。

爲了解決這個執行器調度的問題，tj寫了co模塊來提供了一個方案。

async/await

該寫法就是generator的語法糖。除此以外，還對其進行了一些規範與改進。

var fs = require('fs')
var log = console.log.bind(console)
var Promise = require('bluebird')

function readfile_new(file_name) {
    return new Promise(function (resolve, reject) {
        fs.readFile(file_name, function (err, data) {
            if (err) {
                log(err)
            } else {
                resolve(data.toString())
            }
        })
    })
}

var two_str_async = async function (callback) {
    var str1 = await readfile_new('file1.txt')
    var str2 = await readfile_new('file2.txt')
    callback(str1+str2)
}

two_str_async(log)
複製代碼

與上一個例子相比，不須要使用next調用，亦沒有使用co模塊，其內置了執行器。 將await的函數返回一個promise對象，其即可自動執行。 此時的await至關於promise的then操做，在這個層面上，async/await又是promise的語法糖。