KOA 入门
发布在KOA2学习2017年4月27日view:1589前端开发RalphKabPromiseweb
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

KOA

next generation web framework for node.js

KOA的简介

koa.js 是下一代的node.js框架,由Express团队开发,通过生成器(generators JavaScript 1.7新引入的,用于解决回调嵌套的方案),减少异步回调,提高代码的可读性和可维护性,同时改进了错误处理(Express的错误处理方式相当糟糕)。

KOA的优点

  • 更优雅、简单、安全的中间件机制
  • 更优雅、简单的异常处理
  • 更优雅、简单的异步编程方式

KOA环境依赖

  • KOA@1 Node环境最低 v0.11.x 运行server的时候开启 --harmony (或--harmony-generators)来支持ES6的generators

     node --harmony app.js
    
  • KOA@2 Node环境 node v7.6.x 来支持ES7的async函数

一如既往的hello word

const Koa = require('koa');
const app = new Koa();

app.use(ctx => {
    ctx.body = 'Hello World';
});

app.listen(3000);
// 等价于 http.createServer(app.callback()).listen(3000);

KOA中的上下文 Context

Koa Context 将 node 的 request 和 response 对象封装在一个单独的对象里面,其为编写 web 应用和 API 提供了很多有用的方法。

这些操作在 HTTP 服务器开发中经常使用,因此其被添加在上下文这一层,而不是更高层框架中,因此将迫使中间件需要重新实现这些常用方法。

context 在每个 request 请求中被创建,在中间件中作为接收器(receiver)来引用,或者通过 this 标识符来引用

app.use(function *(){
    this; // is the Context
    this.request; // is a koa Request
    this.response; // is a koa Response
});

许多 context 的访问器和方法为了便于访问和调用,简单的委托给他们的 ctx.request 和 ctx.response 所对应的等价方法, 比如说 ctx.type 和 ctx.length 代理了 response 对象中对应的方法,ctx.path 和 ctx.method 代理了 request 对象中对应的方法。

常用的API

  • ctx.req Node 的 request 对象。
  • ctx.res Node 的 response 对象。
  • ctx.request Koa 的 Request 对象。
  • ctx.response Koa 的 Response 对象。
  • ctx.app 应用实例引用。
  • ctx.cookies.get(name, [options])
  • ctx.cookies.set(name, value, [options])

signed: 是否要做签名 expires: cookie 有效期时间 path: cookie 的路径,默认为 / domain: cookie 的域 secure: false 表示 cookie 通过 HTTP 协议发送,true 表示 cookie 通过 HTTPS 发送。 httpOnly: true 表示 cookie 只能通过 HTTP 协议发送

Koa不支持直接调用底层 res 进行响应处理

res.statusCode
res.writeHead()
res.write()
res.end()

KOA@2 对async await语法支持

function getSyncTime() {
    return new Promise((resolve, reject) => {
        try {
            let startTime = new Date().getTime()
            setTimeout(() => {
                let endTime = new Date().getTime()
                let data = endTime - startTime
                resolve( data )
            }, 500)
        } catch ( err ) {
            reject( err )
        }
    })
}

async function getSyncData() {
    let time = await getSyncTime()
    let data = `endTime - startTime = ${time}`
    return data
}

async function getData() {
    let data = await getSyncData()
    console.log( data )
}

getData()

Chrome 提供原生支持async/await

enter image description here

async/await 的特点

  • 可以让异步逻辑用同步写法实现 {:&.rollIn}
  • 最底层的await返回需要是Promise对象
  • 可以通过多层 async function 的同步写法代替传统的callback嵌套

koa@2的中间件写法

app.use(async (next) => {
    var start = new Date;
    await next();
    var ms = new Date - start;
    this.set('X-Response-Time', ms + 'ms');
});

koa@1的中间件写法

app.use(function *(next){
    var start = new Date;
    yield next;
    var ms = new Date - start;
    this.set('X-Response-Time', ms + 'ms');
});

KOA中间件的执行顺序

enter image description here

KOA中间件的开发和使用

generator中间件开发

// generator中间件返回的应该是function* () 函数
function log( ctx ) {
    console.log( ctx.method, ctx.header.host + ctx.url )
}

module.exports = function () {
    return function* ( next ) {

       // 执行中间件的操作
       log( this )

       if ( next ) {
          yield next
       }
    }
}

generator中间件在koa@1中的使用

// generator 中间件在koa v1中可以直接use使用
const koa = require('koa')  // koa v1
const loggerGenerator  = require('./middleware/logger-generator')
const app = koa()

app.use(loggerGenerator())

app.use(function *( ) {
    this.body = 'hello world!'
})

app.listen(3000)
console.log('the server is starting at port 3000')

async中间件开发

function log( ctx ) {
    console.log( ctx.method, ctx.header.host + ctx.url )
}

module.exports = function () {

    return function ( ctx, next ) {

        return new Promise( ( resolve, reject ) => {

            // 执行中间件的操作
            log( ctx )

            resolve()

            return next()

        }).catch(( err ) => {

            return next()
        })
    }
}

async 中间件在koa@2中使用

// async 中间件只能在 koa v2中使用
const Koa = require('koa') // koa v2
const loggerAsync  = require('./middleware/logger-async')
const app = new Koa()

app.use(loggerAsync())

app.use(( ctx ) => {
    ctx.body = 'hello world!'
})

app.listen(3000)
console.log('the server is starting at port 3000')

路由

koa@2 原生路由实现

// 返回页面访问地址
const Koa = require('koa')
const app = new Koa()

app.use( async ( ctx ) => {
  let url = ctx.request.url
  ctx.body = url
})
app.listen(3000)

koa@2 GET请求

在koa中,获取GET请求数据源头是koa中request对象中的query方法或querystring方法,query返回是格式化好的参数对象,querystring返回的是请求字符串,由于ctx对request的API有直接引用的方式,所以获取GET请求数据有两个途径。

  • 1.是从上下文中直接获取 请求对象ctx.query,返回如 { a:1, b:2 } 请求字符串 ctx.querystring,返回如 a=1&b=2
  • 2.是从上下文的request对象中获取 请求对象ctx.request.query,返回如 { a:1, b:2 } 请求字符串 ctx.request.querystring,返回如 a=1&b=2

koa@2 GET请求

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

app.use( async ( ctx ) => {
    let url = ctx.url
    // 从上下文的request对象中获取
    let request = ctx.request
    let req_query = request.query
    let req_querystring = request.querystring

    // 从上下文中直接获取
    let ctx_query = ctx.query
    let ctx_querystring = ctx.querystring

    ctx.body = {
        url,
        req_query,
        req_querystring,
        ctx_query,
        ctx_querystring
    }
})
app.listen(3000);

koa@2 POST请求

对于POST请求的处理,koa2没有封装获取参数的方法,需要通过解析上下文context中的原生node.js请求对象req,将POST表单数据解析成query string(例如:a=1&b=2&c=3),再将query string 解析成JSON格式(例如:{”a”:”1”, “b”:”2”, “c”:”3”})

// 解析上下文里node原生请求的POST参数
function parsePostData( ctx ) {
    return new Promise((resolve, reject) => {
        try {
            let postdata = "";
            ctx.req.addListener('data', (data) => {
                postdata += data
            })
            ctx.req.addListener("end",function(){
                let parseData = parseQueryStr( postdata )
                resolve( parseData )
            })
        } catch ( err ) {
            reject(err)
        }
    })
}

// 将POST请求参数字符串解析成JSON
function parseQueryStr( queryStr ) {
    let queryData = {}
    let queryStrList = queryStr.split('&')
    console.log( queryStrList )
    for (  let [ index, queryStr ] of queryStrList.entries()  ) {
        let itemList = queryStr.split('=')
        queryData[ itemList[0] ] = decodeURIComponent(itemList[1])
    }
    return queryData
}

KOA的模板引擎

适用于 koa 的模板引擎选择非常多,比如 jade、ejs、nunjucks、xtemplate 等。 怎么选择 ? 主要考虑以下几个因素: * 上手难度 xtemplate < nunjucks < ejs < jade {:&.rollIn} * 功能的强大度 nunjucks > xtemplate > jade > ejs * 是否支持前后端混用 jade不支持 * 性能考量 xtemplate 会更优秀些

jade

body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it! 

ejs

<p><%=: users | first | capitalize %></p>

xtemplate

{{#if(variable===0)}}
  It is true    
{{/if}}

nunjucks

    {% if variable == 0 %}
      It is true
    {% endif %}

koa@2加载模板引擎

const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()

// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
    extension: 'ejs'
}))

app.use( async ( ctx ) => {
    let title = 'hello koa2'
    await ctx.render('index', {
        title,
    })
})

app.listen(3000)

后记

  • ES6/7 带来的变革

自ES6确定和ES7的async/await开始普及,node.js的发展变得更加迅速,可以预见到JavaScript中令人“头疼”的多层嵌套回调(注意是”多层嵌套回调“)将会使用Promise + async/await的方式逐渐替代(不是完全替代,多层嵌套回调也有其特殊的应用场景)。 * koa2 大势所趋的前景

基于async/await实现中间体系的koa2框架将会是是node.js web开发方向大势所趋的普及框架。基于generator/yield的koa1将会逐渐被koa2替代,毕竟使用co.js来处理generator是一种过渡的方式,虽然有其特定的应用场景,但是用async/await会更加优雅地实现同步写法。

参考

koa官方文档
koa中文文档
koa框架
koa实战
koa-generator

评论
发表评论
暂无评论
WRITTEN BY
mailylqj
世界是那么寂静,我只能听到自己的心跳,当我思念的时候,你刚好也在想我吗?
TA的新浪微博
PUBLISHED IN
KOA2学习

KOA2从入门到放弃

我的收藏