jsonp 实现

初始化时候，实例代理上下文context实现

前言

实例代理的还有另外比较有代表性的中间件是官方提供 koa-safe-jsonp 中间件，把jsonp的方法挂载在Koa实例app的app.context 属性中。

常见实例代理上下文context实现步骤

• 初始化一个Koa实例 let app = new Koa()
• 将需要的属性或者方法 demo 挂载在 app.context 上，app.context.demo
• 在app.use()中间件直接使用 ctx.demo 方法或属性

这里我们实现最简单的模板渲染中间件 jsonp，模仿koa-safe-jsonp的基本能力。

实现步骤

jsonp 的实现步骤

• step 01 初始化一个Koa实例 let app = new Koa()
• step 02 将需要的属性或者方法 jsonp 挂载在 app.context 上，app.context.jsonp
• step 03 在app.use()中间件直接使用 ctx.jsonp 方法或属性渲染模板
• step 04 当前请求响应要返回jsonp数据时候 ctx.body = ctx.jsonp(result)

实现源码

demo源码

https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-05-02

## 安装依赖
npm i
## 执行 demo
npm run start
## 最后启动chrome浏览器访问
##  http://127.0.0.1:3000

解读

function jsonp(app, opts = {}) {
  let callback = opts.callback || 'callback';
  app.context.jsonp = function(obj = {}) {
    let ctx = this;
    if (Object.prototype.toString.call(obj).toLowerCase() === '[object object]') {
      let jsonpStr = `;${callback}(${JSON.stringify(obj)})`;
      // 用text/javascript，让请求支持跨域获取
      ctx.type = 'text/javascript';
      // 输出jsonp字符串
      ctx.body = jsonpStr;
    } else {
      ctx.throw(500, 'result most be a json');
    }
  };
}
module.exports = jsonp;

使用

const Koa = require('koa');
const jsonp = require('./index');
const app = new Koa();
jsonp(app, {});
app.use(async ctx => {
  await ctx.jsonp({
    data: 'this is a demo',
    success: true
  });
});
app.listen(3000, () => {
  console.log('[demo] jsonp is starting at port 3000');
});

附录

参考

• https://github.com/koajs/koa-safe-jsonp