徹底理解 thunk 函式與 co 框架

abell123發表於2016-04-22

ES6 帶來了很多新的特性，其中生成器、yield等能對js金字塔式的非同步回撥做到很好地解決，而基於此封裝的co框架能讓我們完全以同步的方式來編寫非同步程式碼。這篇文章對生成器函式（GeneratorFunction）及框架thunkify、co的核心程式碼做了比較徹底的分析。co的使用還是比較廣泛的，除了我們日常的編碼要用到使我們的程式碼邏輯更清晰易懂外，一些知名框架也是基於co實現的，比如被稱為下一代的Nodejs web框架的koa等。

生成器函式

生成器函式是寫成：

1	function* func(){}

格式的函式，其本質也是一個函式，所以它具備普通函式所具有的所有特性。除此之外，它還具有以下有用特性：

執行生成器函式後返回一個生成器（Generator），且生成器具有throw()方法，可手動丟擲一個異常，也常被用於判斷是否是生成器；
在生成器函式內部可以使用yield（或者yield*），函式執行到yield的時候都會暫停執行，並返回yield的右值（函式上下文，如變數的繫結等資訊會保留），通過生成器的next()方法會返回一個物件，含當前yield右邊表示式的值（value屬性），以及generator函式是否已經執行完（done屬性）等的資訊。每次執行next()方法，都會從上次執行的yield的地方往下，直到遇到下一個yield並返回包含相關執行資訊的物件後暫停，然後等待下一個next()的執行；
生成器的next()方法返回的是包含yield右邊表示式值及是否執行完畢資訊的物件；而next()方法的引數是上一個暫停處yield的返回值。

下面用例子說明：

例1：

function test(){

return 'b';

}

function* func(){

var a = yield 'a';

console.log('gen:',a);// gen: undefined

var b = yield test();

console.log('gen:',b);// gen: undefined

}

var func1 = func();

var a = func1.next();

console.log('next:', a);// next: { value: 'a', done: false }

var b = func1.next();

console.log('next:', b);// next: { value: 'b', done: false }

var c = func1.next();

console.log('next:', c);// next: { value: undefined, done: true }

根據上面說過的第3條執行準則：“生成器的next()方法返回的是包含yield右邊表示式值及是否執行完畢資訊的物件；而next()方法的引數是上一個暫停處yield的返回值”，因為我們沒有往生成器的next()中傳入任何值，所以：var a = yield ‘a’;中a的值為undefined。

那我們可以將例子稍微修改下：

例2：

function test(){

return 'b';

}

function* func(){

var a = yield 'a';

console.log('gen:',a);// gen:1

var b = yield test();

console.log('gen:',b);// gen:2

}

var func2 = func();

var a = func2.next();

console.log('next:', a);// next: { value: 'a', done: false }

var b = func2.next(1);

console.log('next:', b);// next: { value: 'b', done: false }

var c = func2.next(2);

console.log('next:', c);// next: { value: undefined, done: true }

這個就比較清晰明瞭了，不再做過多解釋。

關於yield*

yield暫停執行並只返回右值，而yield*則將函式委託到另一個生成器或可迭代的物件（如：字串、陣列、類陣列以及ES6的Map、Set等）。舉例如下：

arguments

function* genFunc(){

yield arguments;

yield* arguments;

}

var gen = genFunc(1,2);

console.log(gen.next().value); // { '0': 1, '1': 2 }

console.log(gen.next().value); // 1

console.log(gen.next().value); // 2

Generator

function* gen1(){

yield 2;

yield 3;

}

function* gen2(){

yield 1;

yield* gen1();

yield 4;

}

var g2 = gen2();

console.log(g2.next().value); // 1

console.log(g2.next().value); // 2

console.log(g2.next().value); // 3

console.log(g2.next().value); // 4

thunk函式

在co的應用中，為了能像寫同步程式碼那樣書寫非同步程式碼，比較多的使用方式是使用thunk函式（但不是唯一方式，還可以是：Promise）。比如讀取檔案內容的一步函式fs.readFile()方法，轉化為thunk函式的方式如下：

function readFile(path, encoding){

return function(cb){

fs.readFile(path, encoding, cb);

};

}

那什麼叫thunk函式呢？

thunk函式具備以下兩個要素：

有且只有一個引數是callback的函式；
callback的第一個引數是error。

使用thunk函式，同時結合co我們就可以像寫同步程式碼那樣來寫書寫非同步程式碼，先來個例子感受下：

var co = require('co'),

fs = require('fs'),

Promise = require('es6-promise').Promise;

function readFile(path, encoding){

return function(cb){ // thunk函式

fs.readFile(path, encoding, cb);

};

}

co(function* (){// 外面不可見，但在co內部其實已經轉化成了promise.then().then()..鏈式呼叫的形式

var a = yield readFile('a.txt', {encoding: 'utf8'});

console.log(a); // a

var b = yield readFile('b.txt', {encoding: 'utf8'});

console.log(b); // b

var c = yield readFile('c.txt', {encoding: 'utf8'});

console.log(c); // c

return yield Promise.resolve(a+b+c);

}).then(function(val){

console.log(val); // abc

}).catch(function(error){

console.log(error);

});

是不是很酷？真的很酷！

其實，對於每次都去自己書寫一個thunk函式還是比較麻煩的，有一個框架thunkify可以幫我們輕鬆實現，修改後的程式碼如下：

var co = require('co'),

thunkify = require('thunkify'),

fs = require('fs'),

Promise = require('es6-promise').Promise;

var readFile = thunkify(fs.readFile);

co(function* (){// 外面不可見，但在co內部其實已經轉化成了promise.then().then()..鏈式呼叫的形式

var a = yield readFile('a.txt', {encoding: 'utf8'});

console.log(a); // a

var b = yield readFile('b.txt', {encoding: 'utf8'});

console.log(b); // b

var c = yield readFile('c.txt', {encoding: 'utf8'});

console.log(c); // c

return yield Promise.resolve(a+b+c);

}).then(function(val){

console.log(val); // abc

}).catch(function(error){

console.log(error);

});

對於thunkify框架的理解註釋如下：

/**
 * Module dependencies.
 */

var assert = require('assert');

/**
 * Expose `thunkify()`.
 */

module.exports = thunkify;

/**
 * Wrap a regular callback `fn` as a thunk.
 *
 * @param {Function} fn
 * @return {Function}
 * @api public
 */

function thunkify(fn) {
    assert('function' == typeof fn, 'function required');
    // 返回一個包含thunk函式的函式，返回的thunk函式用於執行yield，而外圍這個函式用於給thunk函式傳遞引數
    return function() {
        var args = new Array(arguments.length);
        // 快取當前上下文環境，給fn提供執行環境
        var ctx = this;

// 將引數類陣列轉化為陣列（實現方式略顯臃腫，可直接用Array.prototype.slice.call(arguments)實現）
        for (var i = 0; i < args.length; ++i) {
            args[i] = arguments[i];
        }

// 真正的thunk函式（有且只有一個引數是callback的函式，且callback的第一個引數為error）
        // 類似於：
        // function(cb) {fs.readFile(path, {encoding: 'utf8}, cb)}
        return function(done) {
            var called;

// 將回撥函式再包裹一層，避免重複呼叫；同時，將包裹了的真正的回撥函式push進引數陣列
            args.push(function() {
                if (called) return;
                called = true;
                done.apply(null, arguments);
            });

try {
                // 在ctx上下文執行fn（一般是非同步函式，如：fs.readFile）
                // 並將執行thunkify之後返回的函式的引數（含done回撥）傳入，類似於執行：
                // fs.readFile(path, {encoding: 'utf8}, done)
                // 關於done是做什麼用，則是在co庫內
                fn.apply(ctx, args);
            } catch (err) {
                done(err);
            }
        }
    }
};

/**

* Module dependencies.

var assert = require('assert');

/**

* Expose `thunkify()`.

module.exports = thunkify;

/**

* Wrap a regular callback `fn` as a thunk.

* @param {Function} fn

* @return {Function}

* @api public

function thunkify(fn) {

assert('function' == typeof fn, 'function required');

// 返回一個包含thunk函式的函式，返回的thunk函式用於執行yield，而外圍這個函式用於給thunk函式傳遞引數

return function() {

var args = new Array(arguments.length);

// 快取當前上下文環境，給fn提供執行環境

var ctx = this;

// 將引數類陣列轉化為陣列（實現方式略顯臃腫，可直接用Array.prototype.slice.call(arguments)實現）

for (var i = 0; i < args.length; ++i) {

args[i] = arguments[i];

}

// 真正的thunk函式（有且只有一個引數是callback的函式，且callback的第一個引數為error）

// 類似於：

// function(cb) {fs.readFile(path, {encoding: 'utf8}, cb)}

return function(done) {

var called;

// 將回撥函式再包裹一層，避免重複呼叫；同時，將包裹了的真正的回撥函式push進引數陣列

args.push(function() {

if (called) return;

called = true;

done.apply(null, arguments);

});

try {

// 在ctx上下文執行fn（一般是非同步函式，如：fs.readFile）

// 並將執行thunkify之後返回的函式的引數（含done回撥）傳入，類似於執行：

// fs.readFile(path, {encoding: 'utf8}, done)

// 關於done是做什麼用，則是在co庫內

fn.apply(ctx, args);

} catch (err) {

done(err);

}

};

程式碼並不複雜，看註釋應該就能看懂了。

co框架

我們先將對核心部分加了註釋的整個框架列出在下面，你可以先大概看下心裡有個數，也可以在下面分析整個執行邏輯後回過頭來細看：

/**
 * slice() reference.
 */

var slice = Array.prototype.slice;

/**
 * Expose `co`.
 */

module.exports = co['default'] = co.co = co;

/**
 * Wrap the given generator `fn` into a
 * function that returns a promise.
 * This is a separate function so that
 * every `co()` call doesn't create a new,
 * unnecessary closure.
 *
 * @param {GeneratorFunction} fn
 * @return {Function}
 * @api public
 */

co.wrap = function(fn) {
    createPromise.__generatorFunction__ = fn;
    return createPromise;

function createPromise() {
        return co.call(this, fn.apply(this, arguments));
    }
};

/**
 * Execute the generator function or a generator
 * and return a promise.
 *
 * @param {Function} fn
 * @return {Promise}
 * @api public
 */
// gen必須是一個生成器函式（會執行該函式並返回生成器）或者是一個生成器（generator函式的返回值）
function co(gen) {
    // 記錄上下文環境
    var ctx = this;
    // 除gen之外的其他引數
    var args = slice.call(arguments, 1)

// we wrap everything in a promise to avoid promise chaining,
    // which leads to memory leak errors.
    // see https://github.com/tj/co/issues/180
    // 返回一個Promise例項，所以可以以下面這種方式呼叫co：
    /**
     * co(function*(){}).then(function(val){
     *
     * });
     * */
    return new Promise(function(resolve, reject) {
        // 如果gen是一個函式則將其置為函式的返回值
        if (typeof gen === 'function') {
            gen = gen.apply(ctx, args);
        }
        // 如果gen不是生成器，則直接返回
        if (!gen || typeof gen.next !== 'function') {
            return resolve(gen);
        }

// 核心方法，啟動generator的執行
        onFulfilled();

/**
         * @param {Mixed} res
         * @return {Promise}
         * @api private
         */

// res記錄的是：上一個yield的返回值中value的值({done:false,value:''}中value的值)
        // ret記錄的是：本次yield的返回值(整個{done:false,value:''})
        // generator相關：執行生成器的next()方法的時候，會在當前yield處執行完畢並停住，
        // next()方法返回的是yield執行後的狀態(done)及yield 表示式返回的值(value)，
        // 而next()方法內的引數會作為：var a=yield cb();a的值，所以往下看

/**
         * 假設：co(function*(){
         *     var a = yield readFile('a.txt');
         *     console.log(a);
         *     var b = yield readFile('b.txt);
         *     console.log(b);
         * });
         * 那麼根據上面generator的理論，res就是a，b的值
         * */
        function onFulfilled(res) {
            var ret;
            try {
                // 返回的是co裡yield後面表示式的值。如果co裡yield的是thunk函式那ret.value就是thunk函式
                ret = gen.next(res);
            } catch (e) {
                return reject(e);
            }
            next(ret);
        }

/**
         * @param {Error} err
         * @return {Promise}
         * @api private
         */

/**
         * Get the next value in the generator,
         * return a promise.
         *
         * @param {Object} ret
         * @return {Promise}
         * @api private
         */

/**
 * Convert a `yield`ed value into a promise.
 *
 * @param {Mixed} obj
 * @return {Promise}
 * @api private
 */

function toPromise(obj) {
    if (!obj) return obj;
    if (isPromise(obj)) return obj;
    if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);
    if ('function' == typeof obj) return thunkToPromise.call(this, obj);
    if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
    if (isObject(obj)) return objectToPromise.call(this, obj);
    return obj;
}

/**
 * Convert a thunk to a promise.
 *
 * @param {Function}
 * @return {Promise}
 * @api private
 */

/**
 * Convert an array of "yieldables" to a promise.
 * Uses `Promise.all()` internally.
 *
 * @param {Array} obj
 * @return {Promise}
 * @api private
 */

function arrayToPromise(obj) {
    return Promise.all(obj.map(toPromise, this));
}

/**
 * Convert an object of "yieldables" to a promise.
 * Uses `Promise.all()` internally.
 *
 * @param {Object} obj
 * @return {Promise}
 * @api private
 */

function objectToPromise(obj) {
    var results = new obj.constructor();
    var keys = Object.keys(obj);
    var promises = [];
    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];
        var promise = toPromise.call(this, obj[key]);
        if (promise && isPromise(promise)) defer(promise, key);
        else results[key] = obj[key];
    }
    return Promise.all(promises).then(function() {
        return results;
    });

function defer(promise, key) {
        // predefine the key in the result
        results[key] = undefined;
        promises.push(promise.then(function(res) {
            results[key] = res;
        }));
    }
}

/**
 * Check if `obj` is a promise.
 *
 * @param {Object} obj
 * @return {Boolean}
 * @api private
 */

function isPromise(obj) {
    return 'function' == typeof obj.then;
}

/**
 * Check if `obj` is a generator.
 *
 * @param {Mixed} obj
 * @return {Boolean}
 * @api private
 */

function isGenerator(obj) {
    return 'function' == typeof obj.next && 'function' == typeof obj.throw;
}

/**
 * Check if `obj` is a generator function.
 *
 * @param {Mixed} obj
 * @return {Boolean}
 * @api private
 */
function isGeneratorFunction(obj) {
    var constructor = obj.constructor;
    if (!constructor) return false;
    if ('GeneratorFunction' === constructor.name || 'GeneratorFunction' === constructor.displayName) return true;
    return isGenerator(constructor.prototype);
}

/**
 * Check for plain object.
 *
 * @param {Mixed} val
 * @return {Boolean}
 * @api private
 */

function isObject(val) {
    return Object == val.constructor;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

/**

* slice() reference.

var slice = Array.prototype.slice;

/**

* Expose `co`.

module.exports = co['default'] = co.co = co;

/**

* Wrap the given generator `fn` into a

* function that returns a promise.

* This is a separate function so that

* every `co()` call doesn't create a new,

* unnecessary closure.

* @param {GeneratorFunction} fn

* @return {Function}

* @api public

co.wrap = function(fn) {

createPromise.__generatorFunction__ = fn;

return createPromise;

function createPromise() {

return co.call(this, fn.apply(this, arguments));

}

};

/**

* Execute the generator function or a generator

* and return a promise.

* @param {Function} fn

* @return {Promise}

* @api public

// gen必須是一個生成器函式（會執行該函式並返回生成器）或者是一個生成器（generator函式的返回值）

function co(gen) {

// 記錄上下文環境

var ctx = this;

// 除gen之外的其他引數

var args = slice.call(arguments, 1)

// we wrap everything in a promise to avoid promise chaining,

// which leads to memory leak errors.

// see https://github.com/tj/co/issues/180

// 返回一個Promise例項，所以可以以下面這種方式呼叫co：

/**

* co(function*(){}).then(function(val){

* });

* */

return new Promise(function(resolve, reject) {

// 如果gen是一個函式則將其置為函式的返回值

if (typeof gen === 'function') {

gen = gen.apply(ctx, args);

}

// 如果gen不是生成器，則直接返回

if (!gen || typeof gen.next !== 'function') {

return resolve(gen);

}

// 核心方法，啟動generator的執行

onFulfilled();

/**

* @param {Mixed} res

* @return {Promise}

* @api private

// res記錄的是：上一個yield的返回值中value的值({done:false,value:''}中value的值)

// ret記錄的是：本次yield的返回值(整個{done:false,value:''})

// generator相關：執行生成器的next()方法的時候，會在當前yield處執行完畢並停住，

// next()方法返回的是yield執行後的狀態(done)及yield 表示式返回的值(value)，

// 而next()方法內的引數會作為：var a=yield cb();a的值，所以往下看

/**

* 假設：co(function*(){

* var a = yield readFile('a.txt');

* console.log(a);

* var b = yield readFile('b.txt);

* console.log(b);

* });

* 那麼根據上面generator的理論，res就是a，b的值

* */

function onFulfilled(res) {

var ret;

try {

// 返回的是co裡yield後面表示式的值。如果co裡yield的是thunk函式那ret.value就是thunk函式

ret = gen.next(res);

} catch (e) {

return reject(e);

}

next(ret);

}

/**

* @param {Error} err

* @return {Promise}

* @api private

function onRejected(err) {

var ret;

try {

ret = gen.throw(err);

} catch (e) {

return reject(e);

}

next(ret);

}

/**

* Get the next value in the generator,

* return a promise.

* @param {Object} ret

* @return {Promise}

* @api private

function next(ret) {

// 執行完畢的話，如果外層呼叫的是：

/**

* co(function*(){

* return yield Promise.resolve(1);

* }).then(function(val){

* console.log(val); // 1

* });

* */

// 則ret.value就是上面傳遞到then成功回撥裡val的值

if (ret.done) {

return resolve(ret.value);

}

// 還沒結束的話將ret.value轉化為Promise例項，相當於執行：

// promise.then(onFulfilled).then(onFulfilled).then(onFulfilled)...

var value = toPromise.call(ctx, ret.value);

if (value && isPromise(value)) {

// 此時onFulfilled裡引數傳入的就是上一個yield的返回值的value值

return value.then(onFulfilled, onRejected);

}

return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, ' + 'but the following object was passed: "' + String(ret.value) + '"'));

}

});

}

/**

* Convert a `yield`ed value into a promise.

* @param {Mixed} obj

* @return {Promise}

* @api private

function toPromise(obj) {

if (!obj) return obj;

if (isPromise(obj)) return obj;

if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);

if ('function' == typeof obj) return thunkToPromise.call(this, obj);

if (Array.isArray(obj)) return arrayToPromise.call(this, obj);

if (isObject(obj)) return objectToPromise.call(this, obj);

return obj;

}

/**

* Convert a thunk to a promise.

* @param {Function}

* @return {Promise}

* @api private

function thunkToPromise(fn) {

var ctx = this;

return new Promise(function(resolve, reject) {

fn.call(ctx, function(err, res) {

if (err) return reject(err);

if (arguments.length > 2) res = slice.call(arguments, 1);

resolve(res);

});

}

/**

* Convert an array of "yieldables" to a promise.

* Uses `Promise.all()` internally.

* @param {Array} obj

* @return {Promise}

* @api private

function arrayToPromise(obj) {

return Promise.all(obj.map(toPromise, this));

}

/**

* Convert an object of "yieldables" to a promise.

* Uses `Promise.all()` internally.

* @param {Object} obj

* @return {Promise}

* @api private

function objectToPromise(obj) {

var results = new obj.constructor();

var keys = Object.keys(obj);

var promises = [];

for (var i = 0; i < keys.length; i++) {

var key = keys[i];

var promise = toPromise.call(this, obj[key]);

if (promise && isPromise(promise)) defer(promise, key);

else results[key] = obj[key];

}

return Promise.all(promises).then(function() {

return results;

});

function defer(promise, key) {

// predefine the key in the result

results[key] = undefined;

promises.push(promise.then(function(res) {

results[key] = res;

}));

}

/**

* Check if `obj` is a promise.

* @param {Object} obj

* @return {Boolean}

* @api private

function isPromise(obj) {

return 'function' == typeof obj.then;

}

/**

* Check if `obj` is a generator.

* @param {Mixed} obj

* @return {Boolean}

* @api private

function isGenerator(obj) {

return 'function' == typeof obj.next && 'function' == typeof obj.throw;

}

/**

* Check if `obj` is a generator function.

* @param {Mixed} obj

* @return {Boolean}

* @api private

function isGeneratorFunction(obj) {

var constructor = obj.constructor;

if (!constructor) return false;

if ('GeneratorFunction' === constructor.name || 'GeneratorFunction' === constructor.displayName) return true;

return isGenerator(constructor.prototype);

}

/**

* Check for plain object.

* @param {Mixed} val

* @return {Boolean}

* @api private

function isObject(val) {

return Object == val.constructor;

}

下面，我們基於我們之前的例子對co的執行流程做一下分析。

我們的例子是：

var co = require('co'),

thunkify = require('thunkify'),

fs = require('fs'),

Promise = require('es6-promise').Promise;

function readFile(path, encoding){

return function(cb){

fs.readFile(path, encoding, cb);

};

}

//var readFile = thunkify(fs.readFile);

co(function* (){// 外面不可見，但在co內部其實已經轉化成了promise.then().then()..鏈式呼叫的形式

var a = yield readFile('a.txt', {encoding: 'utf8'});

console.log(a); // a

var b = yield readFile('b.txt', {encoding: 'utf8'});

console.log(b); // b

var c = yield readFile('c.txt', {encoding: 'utf8'});

console.log(c); // c

return yield Promise.resolve(a+b+c);

}).then(function(val){

console.log(val); // abc

}).catch(function(error){

console.log(error);

});

首先，執行co()函式，內部除了快取當前執行上下文環境、除generator函式之外的引數處理，主要返回一個Promise例項：

// 記錄上下文環境

var ctx = this;

// 除gen之外的其他引數

var args = slice.call(arguments, 1)

// we wrap everything in a promise to avoid promise chaining,

// which leads to memory leak errors.

// see https://github.com/tj/co/issues/180

// 返回一個Promise例項，所以可以以下面這種方式呼叫co：

/**

* co(function*(){}).then(function(val){

* });

* */

return new Promise(function(resolve, reject) {

});

我們主要看這個Promise內部做了什麼。

if (typeof gen === 'function') {

gen = gen.apply(ctx, args);

}

首先，判斷co()函式的第一個引數是否是函式，是的話將除gen之外的引數傳給該函式並返回給gen；在這裡因為gen是一個生成器函式，所以返回一個生成器；

if (!gen || typeof gen.next !== 'function') {

return resolve(gen);

}

後面判斷如果gen此時不是一個生成器，則直接執行Promise的resolve，其實就是將gen傳回給：co().then(function(val){});裡的val了；

我們這個例子gen是一個生成器，則繼續往下執行。

1	onFulfilled();

後面我們就遇到了co的核心函式：onFulfilled。我們看下這個函式做了什麼。

function onFulfilled(res) {

var ret;

try {

ret = gen.next(res);

} catch (e) {

return reject(e);

}

next(ret);

}

為了防止分心，裡面錯誤的處理我們先暫時不理。

第一次執行該方法，res值為undefined，然後執行生成器的next()方法，對應我們例子裡就是執行：

1	var a = yield readFile('a.txt', {encoding: 'utf8'});

那麼ret是一個物件，大概是這樣：

{

done: false,

value: function(cb){

fs.readFile(path, encoding, cb);

}

然後將ret傳給next函式。next函式是：

function next(ret) {

if (ret.done) {

return resolve(ret.value);

}

var value = toPromise.call(ctx, ret.value);

if (value && isPromise(value)) {

return value.then(onFulfilled, onRejected);

}

return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, ' + 'but the following object was passed: "' + String(ret.value) + '"'));

}

首先判斷生成器內部是否已經執行完，執行完則將執行結果resolve出去。很明顯我們例子裡才執行到第一個yield，並沒有執行完。沒執行完，則將ret.value轉化為一個Promise例項，我們這裡是一個thunk函式，所以toPromise真正執行的是：

function toPromise(obj) {

if (!obj) return obj;

if (isPromise(obj)) return obj;

if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);

if ('function' == typeof obj) return thunkToPromise.call(this, obj);

if (Array.isArray(obj)) return arrayToPromise.call(this, obj);

if (isObject(obj)) return objectToPromise.call(this, obj);

return obj;

}

/**

* Convert a thunk to a promise.

* @param {Function}

* @return {Promise}

* @api private

function thunkToPromise(fn) {

var ctx = this;

return new Promise(function(resolve, reject) {

fn.call(ctx, function(err, res) {

if (err) return reject(err);

if (arguments.length > 2) res = slice.call(arguments, 1);

resolve(res);

});

}

執行後其實就是直接返回了一個Promise例項。而這裡面，也對fn做了執行，fn是：function(cb){}，對應到這裡，function(err, res){…}就是被傳入到fn中的cb，第一個引數就是error物件，第二個引數res就是讀取檔案後資料，然後執行resolve，將結果傳到下一個then方法的成功函式內，而在這裡對應的是：

if (value && isPromise(value)) {

return value.then(onFulfilled, onRejected);

}

其實也就是onFulFilled的引數res。根據上面第三條執行準則，我們知道，res是被傳入到生成器的next()方法裡的，其實也就是對應co內生成器函式引數裡的var a = yield readFile(‘a.txt’,{encoding:’utf8′});裡的a的值，從而實現了類似於同步的變成正規化。

這樣，整個基於thunk函式的co框架程式設計也就理通了，其他的Promise、Generator、GeneratorFunction、Object、Array模式的類似，不再做過多分析。

理解了co的執行邏輯，我們就能更好的掌握其用法，對於後續使用koa等基於co編寫的框架我們也能更快速地上手。

co的簡版

為了更方便快捷的理解co的執行邏輯，在網路上還有一個簡版的實現，如下：

function co(generator) {

return function(fn) {

var gen = generator();

function next(err, result) {

if(err){

return fn(err);

}

var step = gen.next(result);

if (!step.done) {

step.value(next);

} else {

fn(null, step.value);

}

next();

}

但這個實現，僅支援yield後面是thunk函式的情形。使用示例：

var co = require('./co');

// wrap the function to thunk

function readFile(filename) {// 輔助傳參，yield真正使用的是其返回的thunk函式

return function(callback) {

require('fs').readFile(filename, 'utf8', callback);

};

}

co(function * () {

var file1 = yield readFile('./file/a.txt');

var file2 = yield readFile('./file/b.txt');

console.log(file1);

console.log(file2);

return 'done';

})(function(err, result) {

console.log(result)

});

會列印出：

content in a.txt

content in b.txt

done

希望能對理解和學習co的使用方法有很好的幫助。

以上。

打賞支援我寫出更多好文章，謝謝！
打賞作者

打賞支援我寫出更多好文章，謝謝！

任選一種支付方式

徹底理解 thunk 函式與 co 框架

理解thunk函式的作用及co的實現
2019-02-16
函式
js 徹底理解回撥函式
2018-05-22
JS函式
讓你徹底理解 “==”與 Equals
2013-09-05
像數學公式一樣徹底簡單理解JavaScript函式呼叫與this 指標
2019-05-13
公式JavaScript函式指標
Thunk函式的使用
2020-06-19
函式
徹底理解synchronized
2021-12-16
synchronized
Javascript函式引數求值——Thunk函式
2018-11-24
JavaScript函式
徹底理解Golang Map
2022-01-24
Golang
徹底理解正則
2019-02-12
徹底理解ReentrantLock
2018-05-03
ReentrantLock
徹底理解volatile
2018-05-02
回撥函式透徹理解Java
2014-09-24
函式Java
【JavaScript】徹底明白this在函式中的指向
2019-06-28
JavaScript函式
12張圖帶你徹底理解分散式事務！！
2020-12-23
分散式
徹底理解cookie，session，token
2019-05-16
CookieSession
徹底理解JavaScript中的this
2018-12-03
JavaScript
「前端進階」徹底弄懂函式柯里化
2019-07-08
前端函式
【計算機內功心法】六：10張圖讓你徹底理解回撥函式
2021-02-01
計算機函式
Thunk 函式的含義和用法
2015-05-01
函式
徹底理解c++的隱式型別轉換
2021-02-19
C++型別
徹底理解JavaScript函式的呼叫方式和傳參方式——結合經典面試題
2018-12-04
JavaScript函式面試題
徹底理解 Dart mixin 機制
2019-06-01
Dart
徹底理解kubernetes CNI
2019-08-02
徹底理解連結器：四
2018-09-17
徹底理解Hive中的鎖
2020-12-21
Hive
小白(新手)如何徹底理解索引？
2020-11-19
索引
徹底理解 JS 中 this 的指向
2016-10-06
JS
(文摘)徹底理解webservice SOAP WSDL
2014-11-21
Web
徹底理解js中this的指向
2016-02-28
JS
[徹底理解]JDK1.8 函式式介面 Consumer & Supplier 以及 JAVA新紀元 λ表示式的到來
2018-08-24
JDK函式Java
JavaScript之例題中徹底理解this
2019-03-04
JavaScript
徹底理解閉包實現原理
2022-10-26
一張圖徹底理解Javascript原型鏈
2018-06-22
JavaScript原型
徹底理解js中的閉包
2017-07-29
JS
Python函式每日一講 - 一文讓你徹底明白hasattr函式的使用
2024-02-28
Python函式
Python函式每日一講 - 一文徹底讓你明白hash函式的使用
2024-02-29
Python函式
【面試】徹底理解 TCP 及面試常問
2019-03-29
面試TCP
徹底理解Node.js中的Buffer
2019-04-22
Node.js

徹底理解 thunk 函式與 co 框架

生成器函式

例1：

例2：

關於yield*

arguments

Generator

thunk函式

co框架

co的簡版

打賞支援我寫出更多好文章，謝謝！

相關文章