tapable学习笔记之AsyncParallelHook

tapable 学习笔记之 AsyncParallelHook

从 tapable 生产的脚本来看 AsyncParallelHook

先来看 tap + callAsync

const {AsyncParallelHook} = require("tapable");

let queue1 = new AsyncParallelHook(['name']);
console.time('cost');
queue1.tap('1', function (name) {console.log(name, 1);
});
queue1.tap('2', function (name) {console.log(name, 2);
});

queue1.callAsync('webpack', err => {console.timeEnd('cost');
});

// 执行结果

webpack 1
webpack 
cost: 4.520ms

看生产的源码就知道：这种模式属于顺序执行，一个报错立即回调：

"use strict";
var _context;
var _x = this._x;
do {
    var _counter = 2;
    var _done = () => {_callback();
    };
    if (_counter <= 0) break;
    var _fn0 = _x[0];
    var _hasError0 = false;
    try {_fn0(________name);
    } catch (_err) {
        _hasError0 = true;
        if (_counter > 0) {_callback(_err);
            _counter = 0;
        }
    }
    if (!_hasError0) {if (--_counter === 0) _done();}
    if (_counter <= 0) break;
    var _fn1 = _x[1];
    var _hasError1 = false;
    try {_fn1(________name);
    } catch (_err) {
        _hasError1 = true;
        if (_counter > 0) {_callback(_err);
            _counter = 0;
        }
    }
    if (!_hasError1) {if (--_counter === 0) _done();}
} while (false);

接着看 tapAsync + callAsync

let queue2 = new AsyncParallelHook(['name']);
console.time('cost1');
queue2.tapAsync('1', function (name, cb) {setTimeout(() => {console.log(name, 1);
        cb();}, 1000);
});
queue2.tapAsync('2', function (name, cb) {setTimeout(() => {console.log(name, 2);
        cb();}, 2000);
});


queue2.callAsync('webpack', () => {console.log('over');
    console.timeEnd('cost1');
});

// 执行结果
/* 
webpack 1
webpack 2
over
time: 3004.411ms
*/

生产的源码如下：

"use strict";
var _context;
var _x = this._x;
do {
    var _counter = 2;
    var _done = () => {_callback();
    };
    if (_counter <= 0) break;
    var _fn0 = _x[0];
    _fn0(name, _err0 => {if (_err0) {if (_counter > 0) {_callback(_err0);
                _counter = 0;
            }
        } else {if (--_counter === 0) _done();}
    });
    if (_counter <= 0) break;
    var _fn1 = _x[1];
    _fn1(name, _err1 => {if (_err1) {if (_counter > 0) {_callback(_err1);
                _counter = 0;
            }
        } else {if (--_counter === 0) _done();}
    });
} while (false);

最后看 tappromis + promise

执行

const {AsyncParallelBailHook} = require("tapable");
let queue3 = new AsyncParallelBailHook(['name']);
console.time('cost3');
queue3.tapPromise('1', function (name, cb) {return new Promise(function (resolve, reject) {setTimeout(() => {console.log(name, 1);
            resolve();}, 1000);
    });
});

queue3.tapPromise('2', function (name, cb) {return new Promise(function (resolve, reject) {setTimeout(() => {console.log(name, 2);
            reject('wrong');// reject() 的参数是一个不为 null 的参数时，最后的回调就不会再调用了}, 2000);
    });
});


queue3.promise('webpack')
    .then(() => {console.log('over');
        console.timeEnd('cost3');
    }, () => {console.log('error');
        console.timeEnd('cost3');
    });

// 执行结果:
/* 
webpack 1
webpack 2
error
cost3: 2009.970ms
webpack 3
*/

源码：

"use strict";
return new Promise((_resolve, _reject) => {
    var _sync = true;

    function _error(_err) {if (_sync)
            _resolve(Promise.resolve().then(() => {throw _err;}));
        else
            _reject(_err);
    };
    var _context;
    var _x = this._x;
    var _results = new Array(2);
    var _checkDone = () => {for (var i = 0; i < _results.length; i++) {var item = _results[i];
            if (item === undefined) return false;
            if (item.result !== undefined) {_resolve(item.result);
                return true;
            }
            if (item.error) {_error(item.error);
                return true;
            }
        }
        return false;
    }
    do {
        var _counter = 2;
        var _done = () => {_resolve();
        };
        if (_counter <= 0) break;
        var _fn0 = _x[0];
        var _hasResult0 = false;
        var _promise0 = _fn0(name);
        if (!_promise0 || !_promise0.then)
            throw new Error('Tap function (tapPromise) did not return promise (returned' + _promise0 + ')');
        _promise0.then(_result0 => {
            _hasResult0 = true;
            if (_counter > 0) {if (0 < _results.length && (_result0 !== undefined && (_results.length = 1), (_results[0] = {result: _result0}), _checkDone())) {_counter = 0;} else {if (--_counter === 0) _done();}
            }
        }, _err0 => {if (_hasResult0) throw _err0;
            if (_counter > 0) {if (0 < _results.length && ((_results.length = 1), (_results[0] = {error: _err0}), _checkDone())) {_counter = 0;} else {if (--_counter === 0) _done();}
            }
        });
        if (_counter <= 0) break;
        if (1 >= _results.length) {if (--_counter === 0) _done();} else {var _fn1 = _x[1];
            var _hasResult1 = false;
            var _promise1 = _fn1(name);
            if (!_promise1 || !_promise1.then)
                throw new Error('Tap function (tapPromise) did not return promise (returned' + _promise1 + ')');
            _promise1.then(_result1 => {
                _hasResult1 = true;
                if (_counter > 0) {if (1 < _results.length && (_result1 !== undefined && (_results.length = 2), (_results[1] = {result: _result1}), _checkDone())) {_counter = 0;} else {if (--_counter === 0) _done();}
                }
            }, _err1 => {if (_hasResult1) throw _err1;
                if (_counter > 0) {if (1 < _results.length && ((_results.length = 2), (_results[1] = {error: _err1}), _checkDone())) {_counter = 0;} else {if (--_counter === 0) _done();}
                }
            });
        }
    } while (false);
    _sync = false;
});