[Koa系列-1]简单入门

最新推荐文章于 2024-07-03 16:58:10 发布

weixin_33717298

最新推荐文章于 2024-07-03 16:58:10 发布

阅读量88

点赞数

原文链接：https://yq.aliyun.com/articles/16967

版权

1、前言

很久之前就想学习koa，每次学习一般就被其他事情打断；

需要koa的过程，个人认为是这样的：

学习generator
学习promise
学习co的实现，以及koa的原理
开始学习koa搭建基本结构
整合其余服务器端组件

本系列就从第 4 步骤开始；

1.1、基本的示例

Step 1:创建index.js文件

创建一个新的空白文件夹，同时将下述代码存成index.js。

var koa = require('koa');

var app = koa();

var str = '';

// 第一个中间件
// 你重新刷新页面会依次从第一个中间开始运行
app.use(function *(next){  
  str = ''; // 去掉或者增加这一行，看看结果有什么差别

  str += 'A';
  yield next;
  str += 'B';

  console.log('1:',str);

});

// 第二个中间件
app.use(function *(next){

  str += 'C';
  yield next;
  str += 'D';
  console.log('2:',str);

});

// 第三个中间件
app.use(function *(next){

  str += 'E';
  this.body = str;
  str += 'F';
  console.log('3:',str);

});

app.listen(3000);

Step 2:运行示例

在当前目录下执行：

npm init  
npm install --save koa  
node --harmony index.js

node版本要在0.11以上

在浏览器里输入localhost:3000

1.2、理解例子的执行顺序

上述程序运行之后，在浏览器localhost:3000之后，猜一下终端里输出的执行顺序。既不是 A-B-C-D-E-F，也不是 A-C-E-B-D-F，而是 A-C-E-F-D-B。

终端里打印的字符是：

3: ACEF  
2: ACEFD  
1: ACEFDB

浏览器里面永远显示的是：

ACE

你可能会发现终端里会输出两次字符串，这是因为浏览器可能去请求图标favicon了。

Tips：koa.use(function)是向应用程序中注入中间件

KICK OFF KOA - 1 : Hello KOA

后续的教程将伴随着 KICK OFF KOA 的教程展开，由点到面的学习koa框架；

Step 1：获得提示

在命令行中输入kick-off-koa ，并选择第一个 HELLO_KOA

kick-off-koa

按下回车就能出现提示；

Step 2：编写代码

将下列代码保存成 koa1.js 文件：

    var koa = require('koa');
    var app = koa();
    var port = process.argv[2];
    app.use(function *(){
        this.body = 'Hello';
      });
    app.listen(port);

port = process.argv[2] ：用于获取用户输入的参数
app.use(generator)：插入中间件，使用 [generator][3] 函数；
this.body：这里的 this 是中间件的上下文对象，囊括了 request 和 response 这两对象到一个中，并提供了很多有用的方法方便编写web应用

Step 3：验证结果

运行：

kick-off-koa verify koa1.js 3005

如果不出意外，将展示成功：

Your submission results compared to the expected:

────────────────────────────────────────────────────────────────────────────────

1.  ACTUAL:    "hello koa"  
1.  EXPECTED:  "hello koa"

2.  ACTUAL:    ""  
2.  EXPECTED:  ""


────────────────────────────────────────────────────────────────────────────────

 Submission results match expected

为了对照还会给出官方的答案。