0825

[LeungKaMing]

原生Koa实现JSONP

在项目复杂的业务场景，有时候需要在前端跨域获取数据，这时候提供数据的服务就需要提供跨域请求的接口，通常是使用JSONP的方式提供跨域接口。

var koa = require('koa')
var app = new koa()

app.use(async (ctx) => {
  if (ctx.method === 'GET' && ctx.url.split('?')[0] === '/getData.jsonp') {
    // 获取jsonp的callback参数
    let callbackName = ctx.query.callback || 'callback'
    console.log(callbackName)
    let returnData = {
      success: true,
      data: {
        text: 'this is a jsonp api',
        time: new Date().getTime()
      }
    }

    // jsonp的script字符串
    let jsonpStr= `;${callbackName}(${JSON.stringify(returnData)})`
    
    // 用text/javascript让请求支持跨域获取
    ctx.type = 'text/javascript'

    ctx.body = jsonpStr
  } else {
    ctx.body = 'hello jsonp'
  }
})

app.listen(3000, ()=>{
  console.log('run on 3000 port')
})

中间件实现JSONP

const Koa = require('koa')
const jsonp = require('koa-jsonp')
const app = new Koa()

// 使用中间件
app.use(jsonp())

app.use( async ( ctx ) => {

  let returnData = {
    success: true,
    data: {
      text: 'this is a jsonp api',
      time: new Date().getTime(),
    }
  }

  // 直接输出JSON
  ctx.body = returnData
})

app.listen(3000, () => {
  console.log('[demo] jsonp is starting at port 3000')
})

总结

现在用到中间件有：

• koa-router => 简便处理ctx.request.url的过程
• koa-bodyparser => 简便处理请求类型为POST的参数
• koa-static => 简便处理模块之间引用静态资源路径的问题
• koa-views => 模板引擎
• koa-jsonp => JSONP

现在掌握了的API有：

1. ctx.url 获取当前url
2. ctx.request 获取请求对象

• ctx.request.query <===> ctx.query 获取请求参数(格式化)
• ctx.request.queryString <===> ctx.queryString 获取请求参数(字符串)

3. ctx.req 调用原生node请求属性/方法

• ctx.req.addListener('data', (data) => {})
• ctx.req.addListener('end', () => {}) // 上述两者都用于处理POST请求参数

4. ctx.response 获取响应对象
5. ctx.res 调用原生node响应属性/方法

• ctx.res.writeHead(statusCode, reason) 自定义响应头的状态码和原因
• ctx.res.write(content, 'binary') 以二进制格式输出内容，第二个参数可变
• ctx.res.end() 结束响应

现在掌握了的Node原生API有：

1. fs

• fs.existsSync(filepath/directorypath) 同步判断该路径下的文件或目录是否存在
• fs.statSync(directorypath).isDirectory() 同步判断该路径指的是否为目录
• fs.readFileSync 同步读文件 / fs.readFile 异步读文件
• fs.mkdirSync 同步创建目录 / fs.mkdir 异步创建文件

2. path

• path.join(path1, path2) 将path1和path2拼接起来，返回完整路径
• path.resolve(path1, path2) 同上
• path.extname 用于截取请求url的后缀
• path.dirname(path) 获取当前路径的父级目录

3. util

• util.inspect(object[, options]) 传入JS原始值或对象，返回字符串形式的传入参数

4. cookie
   // koa的ctx自带读取 和 写入 cookie的方法

• ctx.cookies.get(name, [options]) 读取cookie
• ctx.cookies.set(name, value, [options]) 写入cookie

ctx.cookies.set('name', 'ljm', {
    domain: 'localhost',  // 写cookie所在的域名
    path: '/index',       // 写cookie所在的路径
    maxAge: 10 * 60 * 1000, // cookie有效时长
    expires: new Date('2017-02-15'),  // cookie失效时间
    httpOnly: false,  // 是否只用于http请求中获取
    overwrite: false  // 是否允许重写
  }
)

5. session
   // 遗憾的是跟post请求一样，koa并没有提供读取 和 写入session 的方法。只能通过自己实现或者通过第三方中间件实现:

• koa-session-minimal 适用于koa2 的session中间件，提供存储介质的读写接口 。
• koa-mysql-session 为存储介质koa-session-minimal中间件提供MySQL数据库的session数据读写操作。