koa2学习笔记

快速开始

安装Koa2

//初始化package.json
npm init

//安装 Koa2
npm install koa

hello world

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

app.use(async (ctx) => {
    ctx.body = 'hello Koa2'
});

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

启动demo

node index.js

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();

从上述例子中可以看出async/await的特点：

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

Koa2特性

• 只提供封装好http上下文、请求、响应以及基于async/await的中间件容器
• 利用es7 async/await 的来处理传统回调嵌套问题和代替koa@1的generator,但是需要node.js7.X版本以上
• 中间件只支持 async/await封装的，如果要使用koa@1基于generator的中间件，需要通过中间件koa-convert封装一下才能用

async中间件开发

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

module.exports = function(){
    return async function(ctx, next) {
        log(ctx);
        next();
    }
}

async中间件在koa2中使用

// async中间件只能在koa2中使用

const Koa = require('koa');
const loggerAsync = require('./middleware/logger-async.js');
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-router的使用

安装koa-router

npm install koa-router --save-dev

举个栗子

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

//引入koa-router
const Router = require('koa-router');

//子路由1
let home = new Router();

home.get('/', async (ctx) => {
    let html = `
        <ul>
            <li><a href="/page/404">/page/404</a></li>
            <li><a href="/page/helloworld">/page/helloworld</a></li>
        </ul>
    `
    ctx.body = html
});

//子路由2
let page = new Router();

page.get('/404', async (ctx) => {
    ctx.body = 'this is 404 page!'
}).get('/helloworld', async (ctx) => {
    ctx.body = 'this is helloworld page!'
});

//装载所有子路由
let router = new Router();

router.use('/', home.routes(), home.allowedMethods());
router.use('/page', page.routes(), page.allowedMethods());

//加载路由中间件
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
    console.log(`the server is starting at port 3000`)
})

GET请求数据获取

使用方法

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

1.从上下文中获取
    ctx.query 请求对象
    ctx.queryString 请求字符串
2.从上下文的request对象中获取
    ctx.request.query 请求对象
    ctx.request.queryString 请求字符串

举个栗子

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

app.use( async (ctx) => {
    let url = ctx.url;
    let request = ctx.request;

    //从上下文中的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, () => {
    console.log(`the server is starting at port 3000`)
});

koa-bodyparser中间件

安装中间件

npm install koa-bodyparser --save

原理

对于POST请求的处理，koa-bodyparser中间件可以将koa上下文中的formData数据解析到ctx.request.body中。

举个栗子

const Koa = require('koa')
const app = new Koa()
const bodyParser = require('koa-bodyparser')

// 使用ctx.body解析中间件
app.use(bodyParser())

app.use( async ( ctx ) => {

  if ( ctx.url === '/' && ctx.method === 'GET' ) {
    // 当GET请求时候返回表单页面
    let html = `
      <h1>koa2 request post demo</h1>
      <form method="POST" action="/">
        <p>userName</p>
        <input name="userName" /><br/>
        <p>nickName</p>
        <input name="nickName" /><br/>
        <p>email</p>
        <input name="email" /><br/>
        <button type="submit">submit</button>
      </form>
    `
    ctx.body = html
  } else if ( ctx.url === '/' && ctx.method === 'POST' ) {
    // 当POST请求的时候，中间件koa-bodyparser解析POST表单里的数据，并显示出来
    let postData = ctx.request.body
    ctx.body = postData
  } else {
    // 其他请求显示404
    ctx.body = '<h1>404！！！ o(╯□╰)o</h1>'
  }
})

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

静态资源加载中间件 koa-static的使用

安装

npm install koa-static --save

举个栗子

const Koa = require('koa');
const path = require('path');
const static = require('koa-static');

const app = new Koa();

const staticPath = './static';

app.use(static(
    path.join(__dirname, staticPath)
))

app.use(async (ctx) => {
    ctx.body = 'Hello world'
})

app.use(3000, () => {
    console.log('the server is starting at port 3000')
})