利用promise实现超简单中间件机制

广告位招租
扫码页面底部二维码联系

首先我们看下中间件的运作机制,当一个被加【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】入到中间件pipe列表中的中间件开始处理【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。传入的内容时,它需要调用一个next,通【本文受版权保护】【转载请注明来源】过next来触发下一个中间件,如果没有下本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net一个,则表示所有中间件已经处理完毕,进入【版权所有,侵权必究】未经授权,禁止复制转载。正常的处理程序。而如果没有执行next函【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】数,则进程被block住,处于一直等待状【原创内容,转载请注明出处】未经授权,禁止复制转载。态,这样,我们就可以在中间件中进行异步处【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net理,在异步处理的回调中去执行next函数【原创内容,转载请注明出处】未经授权,禁止复制转载。

原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net

那么,怎能在js中实现这种机制呢?我们来【作者:唐霜】本文作者:唐霜,转载请注明出处。看下超简洁的代码实现:

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】【作者:唐霜】
/**
 * @desc process with a pipe line
 * @param array middlewares: a middleware is a function which like `function deal(args, next, stop) {}`,
 *  in this function, you can modify args and use `next(args)` to pass it to next middleware,
 *  next middleware will recieve `next(args)`'s `args` as first parameter,
 *  or use `stop()` to stop process
 * @param any params, will be used as the first middleware's first parameter.
 * @return a promise
 */
export default function crossPipeLine(params, middlewares) {
    return new Promise((resolve, reject) => {
        let i = 0;
        // if middlewares is not as expected
        if (!Array.isArray(middlewares)) {
            middlewares = typeof middlewares === "function" ? [middlewares] : [];
        }
        // remove no use middlewares
        middlewares = middlewares.filter((item) => !!item);
        let roll = (args) => {
            let pipe = middlewares[i];
            if (!pipe) {
                resolve(args);
                return;
            }
            i++;
            return new Promise((next, stop) => pipe(args || params, next, stop)).then(roll).catch(reject);
        };
        roll(params);
    });
}

上面这段代码,创建了一个通道处理器,在处【本文首发于唐霜的博客】未经授权,禁止复制转载。理器中执行中间件函数,全部执行完之后,返【转载请注明来源】著作权归作者所有,禁止商业用途转载。回一个promise。看下一个中间件函数著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net怎么写:

著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。【本文受版权保护】【本文首发于唐霜的博客】
function myMiddleware(req, next, stop) {
  // modify req
  next(req)
}

其中,红色的next和stop是两个固定【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】参数,都是函数,放在middleware【本文首发于唐霜的博客】未经授权,禁止复制转载。函数的最后两个参数位置,前面的req是自【本文受版权保护】本文版权归作者所有,未经授权不得转载。定义参数,且只有这一个自定义参数(数据类本文作者:唐霜,转载请注明出处。原创内容,盗版必究。型可以根据自己的情况传入),比如myMi【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。ddleware([1, 2, 3], 著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。next)或者myMiddleware(【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net{ a: 1 }, next),stop【本文首发于唐霜的博客】【本文受版权保护】是可以省略的,但是next不可以省略,因著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。为如果不执行next或stop中的任何一【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。个,那么程序会停滞在这里,不会继续往下执【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】行。

【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net原创内容,盗版必究。原创内容,盗版必究。本文作者:唐霜,转载请注明出处。

next的参数是传给下一个中间件函数的第未经授权,禁止复制转载。【原创内容,转载请注明出处】一个参数。比如上面这里的next(req【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net),那么在下一个中间件myMiddlew【作者:唐霜】未经授权,禁止复制转载。are2(req, next, stop【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net)里面的req就来自于next。在一些情【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。况下next可以不传参数,比如你在中间件【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。里面直接修改了req,由于req是个对象【原创内容,转载请注明出处】【本文受版权保护】,是引用型数据,所以在下一个中间件里面,本文作者:唐霜,转载请注明出处。【转载请注明来源】你使用req时,已经是被修改过的。这种情【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。况下,可以不给next传参,不传参的情况本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】,实际上是把当前中间件接收到的第一个参数【转载请注明来源】【版权所有,侵权必究】传给下一个中间件,但如果你想传递字符串或著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。数字或boolean,就必须要通过nex著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。t传入。

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。【本文受版权保护】本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】

接下来,看下如何在一个项目中如何使用这个本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】通道处理器:

【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。
let myMiddlewares = [ myMiddleware ]
let newReq = await crossPipeLine(req, myMiddlewares)

这样就实现了一个非常简洁的中间件机制。【转载请注明来源】

著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】【作者:唐霜】

2017-12-16 5152

为价值买单,打赏一杯咖啡

本文价值51.52RMB