tapable学习笔记之AsyncSeriesHook

AsyncSeriesHook 异步串行

从tapable生产的脚本来看AsyncSeriesHook

先来看 tapAsync+ callAsync

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

let queue2 = new AsyncSeriesHook(['name']); console.time('cost2'); 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.tapAsync('3', function (name, cb) { setTimeout(() => { console.log(name, 3); cb(); }, 3000); }); queue2.callAsync('webpack', (err) => { console.log(err); console.log('over'); console.timeEnd('cost2'); }); // 执行结果 /* webpack 1 webpack 2 webpack 3 undefined over cost2: 6019.621ms */

源码：

"use strict";
var _context;
var _x = this._x;

function _next1() { var _fn2 = _x[2]; _fn2(name, _err2 => { if (_err2) { _callback(_err2); } else { _callback(); } }); } function _next0() { var _fn1 = _x[1]; _fn1(name, _err1 => { if (_err1) { _callback(_err1); } else { _next1(); } }); } var _fn0 = _x[0]; _fn0(name, _err0 => { if (_err0) { _callback(_err0); } else { _next0(); } });

从以上看，特别简单，串行执行。

再看下tap加callAsync

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

// tap
let queue1 = new AsyncSeriesHook(['name']); console.time('cost1'); queue1.tap('1', function (name) { console.log(1); return "Wrong"; }); queue1.tap('2', function (name) { console.log(2); }); queue1.tap('3', function (name) { console.log(3); }); queue1.callAsync('zfpx', err => { console.log(err); console.timeEnd('cost1'); }); // 执行结果 /* 1 2 3 undefined cost1: 3.933ms */ 

源码：

"use strict";
var _context;
var _x = this._x;
var _fn0 = _x[0]; var _hasError0 = false; try { _fn0(name); } catch (_err) { _hasError0 = true; _callback(_err); } if (!_hasError0) { var _fn1 = _x[1]; var _hasError1 = false; try { _fn1(name); } catch (_err) { _hasError1 = true; _callback(_err); } if (!_hasError1) { var _fn2 = _x[2]; var _hasError2 = false; try { _fn2(name); } catch (_err) { _hasError2 = true; _callback(_err); } if (!_hasError2) { _callback(); } } }

即 顺序执行，报错就提前执行总callback

再来看：
tapPromise + promise

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

let queue3 = new AsyncSeriesHook(['name']); console.time('cost3'); queue3.tapPromise('1',function(name){ return new Promise(function(resolve){ setTimeout(function(){ console.log(name, 1); resolve(); },1000) }); }); queue3.tapPromise('2',function(name,callback){ return new Promise(function(resolve){ setTimeout(function(){ console.log(name, 2); resolve(); },2000) }); }); queue3.tapPromise('3',function(name,callback){ return new Promise(function(resolve){ setTimeout(function(){ console.log(name, 3); resolve(); },3000) }); }); queue3.promise('webapck').then(err=>{ console.log(err); console.timeEnd('cost3'); }); // 执行结果 /* webapck 1 webapck 2 webapck 3 undefined cost3: 6021.817ms */ 

源码：

"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; function _next1() { var _fn2 = _x[2]; var _hasResult2 = false; var _promise2 = _fn2(name); if (!_promise2 || !_promise2.then) throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise2 + ')'); _promise2.then(_result2 => { _hasResult2 = true; _resolve(); }, _err2 => { if (_hasResult2) throw _err2; _error(_err2); }); } function _next0() { 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; _next1(); }, _err1 => { if (_hasResult1) throw _err1; _error(_err1); }); } 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; _next0(); }, _err0 => { if (_hasResult0) throw _err0; _error(_err0); }); _sync = false; });

即返回的是一个promise