koa2 中的错误处理以及中间件设计原理
<p>其实这不是一个问题,因为就 koa2 而言,他已经帮我做好了统一错误处理入口 app.onerror 方法。</p> <p>我们只要覆盖这个方法,就可以统一处理包括 中间件,事件,流 等出现的错误。</p> <p>但我们始终会看到 UnhandledPromiseRejectionWarning: 类型的错误。</p> <p>当然,这不一定就是 koa 导致,有可能是其他异步未处理错误导致的,但这都不重要。</p> <p>让我们来看看 koa 是如何处理全局错误的。</p> <h2>koa2 中间件</h2> <p>官网例子:</p> <pre> <code class="language-javascript">const Koa = require('koa'); const app = new Koa(); app.use(async (ctx, next) => { const start = Date.now(); await next(); const ms = Date.now() - start; console.log(`${ctx.method} ${ctx.url} - ${ms}ms`); }); app.use(ctx => { ctx.body = 'Hello Koa'; }); app.listen(3000); </code></pre> <p>由于 koa2 设计原理,让我们很容易的就实现了一个请求日志中间件。</p> <p>这里就不上洋葱图了,因为这不是入门教程。</p> <p>官网上也说了,中间件的 async 可以改写为普通函数。</p> <pre> <code class="language-javascript">app.use((ctx, next) => { const start = Date.now(); return next().then(() => { const ms = Date.now() - start; console.log(`${ctx.method} ${ctx.url} - ${ms}ms`); }); }); </code></pre> <p>和上面效果一致。</p> <p>但你知道为什么要加 return ?如果不加 return 会发生什么吗?</p> <h2>多中间件</h2> <p>删除 return 测试后会发现,好像没问题,一切正常。</p> <p>我们来看个例子:</p> <pre> <code class="language-javascript">const Koa = require('koa'); const app = new Koa(); app.use((ctx, next) => { ctx.msg = 'hello'; next(); }); app.use((ctx, next) => { ctx.msg += ' '; next(); }); app.use((ctx, next) => { ctx.msg += 'world'; next(); }); app.use(ctx => { ctx.body = ctx.msg; }); app.listen(3000); </code></pre> <p>打开页面后,如果你看到 hello world 那恭喜你,一切正常。</p> <h2>中间件中的异常</h2> <p>如果我们不小心把 ctx.msg += 'world'; 写成了 cxt.msg += 'world'; 这种手误相信大家都会遇到吧。</p> <p>或者干脆直接抛出个错误算了,方便测试。</p> <pre> <code class="language-javascript">app.use((ctx, next) => { throw Error('炸了'); ctx.msg += 'world'; next(); }); </code></pre> <p>恭喜得到 UnhandledPromiseRejectionWarning: Error: 炸了 错误一枚。</p> <p>让我们加上 app.onerror 来和谐这个错误吧。</p> <pre> <code class="language-javascript">const Koa = require('koa'); const app = new Koa(); app.use((ctx, next) => { ctx.msg = 'hello'; next(); }); app.use((ctx, next) => { ctx.msg += ' '; next(); }); app.use((ctx, next) => { throw Error('炸了'); ctx.msg += 'world'; next(); }); app.use(ctx => { ctx.body = ctx.msg; }); app.onerror = (err) => { console.log('捕获到了!', err.message); } app.listen(3000); </code></pre> <p>再次运行,遇到哲学问题了,为什么他没捕获到。</p> <p>再试试官网中记载的错误处理方法 <a href="/misc/goto?guid=4959757862008837380" rel="nofollow,noindex">Error Handling</a> .</p> <pre> <code class="language-javascript">const Koa = require('koa'); const app = new Koa(); app.use(async (ctx, next) => { try { await next(); } catch (err) { ctx.status = err.status || 500; ctx.body = err.message; ctx.app.emit('error', err, ctx); } }); app.on('error', (err, ctx) => { console.log('捕获到了!', err.message); }); app.use((ctx, next) => { ctx.msg = 'hello'; next(); }); app.use((ctx, next) => { ctx.msg += ' '; next(); }); app.use((ctx, next) => { throw Error('炸了'); ctx.msg += 'world'; next(); }); app.use(ctx => { ctx.body = ctx.msg; }); app.listen(3000); </code></pre> <p>再次运行,,神了,依然也没捕获到,难道官网例子是假的?还是我们下了个假的 koa ?</p> <h2>中间件关联的纽带</h2> <p>其实吧,我们违反了 koa 的设计,有两种方法处理这个问题。</p> <p>如果不想改成 async 函数,那就在所有 next() 前面加上 return 即可。</p> <p>如果是 async 函数,那所有 next 前面加 await 即可。</p> <p>先来看看结果:</p> <pre> <code class="language-javascript">const Koa = require('koa'); const app = new Koa(); app.use(async (ctx, next) => { try { await next(); } catch (err) { ctx.status = err.status || 500; ctx.body = err.message; ctx.app.emit('error', err, ctx); } }); app.on('error', (err, ctx) => { console.log('捕获到了!', err.message); }); app.use((ctx, next) => { ctx.msg = 'hello'; return next(); }); app.use((ctx, next) => { ctx.msg += ' '; return next(); }); app.use((ctx, next) => { throw Error('炸了'); ctx.msg += 'world'; return next(); }); app.use(ctx => { ctx.body = ctx.msg; }); app.listen(3000); </code></pre> <p>再次运行,可以完美的捕获到错误。</p> <h2>自定义错误处理</h2> <p>如果是自定义异步操作异常呢。</p> <pre> <code class="language-javascript">const Koa = require('koa'); const app = new Koa(); app.use(ctx => { new Promise(() => { throw Error('炸了'); }); ctx.body = 'Hello Koa'; }); app.onerror = (err) => { console.log('捕获到了!', err.message); } app.listen(3000); </code></pre> <p>由于是用户自定义操作,什么时候发生错误其实是未知的。</p> <p>但我们只要把错误引导到 koa 层面报错,即可利用 app.onerror 统一处理。</p> <pre> <code class="language-javascript">app.use(async ctx => { await new Promise(() => { throw Error('炸了'); }); ctx.body = 'Hello Koa'; }); </code></pre> <p>这样他的错误其实是在 koa 的控制下 throw 的,可以被 koa 统一捕获到。</p> <h2>中间件原理</h2> <p>说了这么多错误处理方法,还没说为什么要这处理。</p> <p>当然如果你对原理不感兴趣,其实上面就够了,下面的原理可以忽略。</p> <p>koa 的中间件其实就是一个平行函数(函数数组)转为嵌套函数的过程。</p> <p>用到了 <a href="/misc/goto?guid=4959757862086970143" rel="nofollow,noindex">koa-compose</a> ,除去注释源码就20行左右。</p> <p>功底扎实的就不需要我多解释了,如果看不懂,那就大致理解为下面这样。</p> <pre> <code class="language-javascript">// 我们定义的中间件 fn1(ctx, next); fn2(ctx, next); fn3(ctx); // 组合成 fn1(ctx, () => { fn2(ctx, () => { fn3(ctx); }) }); </code></pre> <p>是不是看的一脸懵逼,那就对了,因为我也不知道怎么表达。</p> <p>看个类似的问题的,从本质问题出发。</p> <pre> <code class="language-javascript">function fn(ctx) { return new Promise(resolve => { setTimeout(() => resolve(ctx), 0); }); } const ctx = { a: 1 }; fn(ctx).then((ctx) => { ctx.b = 1; fn(ctx).then((ctx) => { ctx.c = 1; fn(ctx).then((ctx) => { ctx.d = 1; fn(ctx).then((ctx) => { fn(ctx).then(console.log); }); }); }); }).catch(console.error); </code></pre> <p>执行后输出 { a: 1, b: 1, c: 1, d: 1 }<br> 如果在内层回调中加个错误。</p> <pre> <code class="language-javascript">function fn(ctx) { return new Promise(resolve => { setTimeout(() => resolve(ctx), 0); }); } const ctx = { a: 1 }; fn(ctx).then((ctx) => { ctx.b = 1; fn(ctx).then((ctx) => { ctx.c = 1; throw Error('err'); fn(ctx).then((ctx) => { ctx.d = 1; fn(ctx).then((ctx) => { fn(ctx).then(console.log); }); }); }); }).catch(console.error); </code></pre> <p>跟 koa 中的情况一样,无法捕获,而且抛出 UnhandledPromiseRejectionWarning: 错误。</p> <p>我们只需要加上 return 即可。</p> <pre> <code class="language-javascript">function fn(ctx) { return new Promise(resolve => { setTimeout(() => resolve(ctx), 0); }); } const ctx = { a: 1 }; fn(ctx).then((ctx) => { ctx.b = 1; return fn(ctx).then((ctx) => { ctx.c = 1; throw Error('err'); return fn(ctx).then((ctx) => { ctx.d = 1; return fn(ctx).then((ctx) => { return fn(ctx).then(console.log); }); }); }); }).catch(console.error); </code></pre> <p>这次执行,发现捕获到了。为什么会发生这样的情况呢?</p> <p>简单说吧,就是 promise 链断掉了。我们只要让他连接起来,不要断掉即可。</p> <p>所以内层需要 return 否则就相当于 return undefined 导致链断掉了,自然无法被外层 catch 到。</p> <pre> <code class="language-javascript">const ctx = { a: 1 }; fn(ctx).then(async () => { await fn(ctx).then(async () => { await fn(ctx).then(async () => { await fn(ctx).then(async () => { throw Error('123'); await fn(ctx); }); }); }); }).catch(console.error); </code></pre> <p>当然改成 async/await 也可以。</p> <h2>中间件设计</h2> <p>官网 issue 中 <a href="/misc/goto?guid=4959757862167980733" rel="nofollow,noindex">I can’t catch the error ~</a> 就有人问了,为什么我捕获不到错误。</p> <p>回答中说,必须 await 或 return。</p> <p>但也有人修改了源码,加了个类似 Promise.try 的实现。</p> <p>然后被人说了,为什么你要违反他本来的设计。</p> <p>其实没看到这个之前,我也打算自己修改源码的。</p> <p>很多时候当我们看到代码为什么不那样写的时候,其实人家已经从全局考虑了这个问题。</p> <p>而我们只是看到了这一个“问题”的解决方法,而没有在更高层面统筹看待问题。</p> <p> </p> <p>来自:http://www.52cik.com/2018/05/27/koa-error.html</p> <p> </p>
本文由用户 ZelMichalik 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!