学习mpvue笔记——koa入门

koa是什么？
koa基于Nodejs平台的下一代web开发框架（上一代是express）。

Express原班人马打造，更精简。
Async+await处理异步
洋葱圈型的中间件机制。
用法很简单：

mkdir koa-demo
npm init
npm install koa --save

文件夹中新建一个server.js

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

app.use(async(ctx, next) => {ctx.body = 'hello'})
app.listen(3000)//端口3000

node server.js

就可以访问localhost:3000了。
ctx是什么呢？封装了request和response的上下文。
next是什么呢？下一个中间件。
app是什么呢？启动应用
中间件机制：

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

app.use(async(ctx, next) => {
    ctx.body = '1'
    next()
    ctx.body += '2'
})
app.use(async(ctx, next) => {
    ctx.body += '3'
    next()
    ctx.body += '4'
})
app.use(async(ctx, next) => {
    ctx.body += '5'
    next()
    ctx.body += '6'
})

app.listen(3000)

结果是：135642
下面这个图可以解释这个机制。

洋葱圈

写一个小插件
新建一个koa-logger.js

module.exports = async(cxt, next) => {
    const start = new Date().getTime();
    await next();
    const end = new Date().getTime();
    console.log(cxt.request.url, end-start, cxt.body.length)
}

在server.js里引用

const koalog = require('./koa-logger.js')
app.use(koalog)

就可以在命令行中显示出地址，耗时。
koa-router也很简单
安装

npm install koa-router --save

引入

const Router = require('koa-router')
const router = new Router()

使用

router.get('/', (ctx, next) => {
    //根目录
    })
router.get('/1', (ctx, next) => {
    //
    })
    .
    .
    .
app.use(router.routes())
   .use(router.allowedMethods())

async和await优雅的处理异步

  function ajax() {
      setTimeout(() => {
        console.log('你好')
      }, 1000)
    }
    ajax()
    console.log('sean')

我们都知道输出sean 1秒之后再输出你好。
异步编程的几个方法：

callback回调函数，很古老的东西了。

function ajax(fn) {
    setTimeout(() => {
        console.log('你好')
        fn()//回调函数
    }, 1000)
    
}
var fn = function () {
    console.log('sean')
}
ajax(fn)

回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。如果回调函数中再嵌套回调函数的话，就行成了回调地狱（callback hell）

promise

function delay(word) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(word)
        }, 1000)
    })
}
delay('鸣人').then((word) => {
    console.log(word)
    return delay('佐助')
}).then((word) => {
    console.log(word)
    return delay('小樱')
}).then((word) => {
    console.log(word)
})
//鸣人，佐助，小樱

promise链式调用：会将前一个then的返回值（return）作为下一次成功的回调函数的参数。

async+await (必须一起使用)

function delay(word) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(word)
                }, 1000)
            })
        }

async function start() {
    const word1 = await delay('鸣人')
    console.log(word1)
    const word2 = await delay('佐助')
    console.log(word2)
    const word3 = await delay('小樱')
    console.log(word3)
}
start()

简单明了。

学习mpvue笔记——koa入门

推荐阅读更多精彩内容