Node.js系列十一 - koa开发web服务器

简介: koa开发web服务器

一. Koa初体验


1.1. 认识Koa


前面我们已经学习了express,另外一个非常流行的Node Web服务器框架就是Koa。

Koa官方的介绍:

  • koa:next generation web framework for node.js;
  • koa:node.js的下一代web框架;

事实上,koa是express同一个团队开发的一个新的Web框架:

  • 目前团队的核心开发者TJ的主要精力也在维护Koa,express已经交给团队维护了;
  • Koa旨在为Web应用程序和API提供更小、更丰富和更强大的能力;
  • 相对于express具有更强的异步处理能力(后续我们再对比);
  • Koa的核心代码只有1600+行,是一个更加轻量级的框架,我们可以根据需要安装和使用中间件;


1.2. koa初体验


因为学习过了express,它们的基本开发模式是比较相似的。

我们来体验一下koa的Web服务器:

const Koa = require('koa');
const app = new Koa();
app.use((ctx, next) => {
  console.log("middleware 01");
  next();
})
app.use((ctx, next) => {
  console.log("middleware 02");
  ctx.response.body = "Hello World";
})
app.listen(8000, () => {
  console.log("服务器启动成功~");
});

koa注册的中间件提供了两个参数:

  • ctx:上下文(Context)对象;
  • koa并没有像express一样,将req和res分开,而是将它们作为ctx的属性;
  • ctx代表依次请求的上下文对象;
  • ctx.request:获取请求对象;
  • ctx.response:获取响应对象;
  • next:本质上是一个dispatch,类似于之前的next;
  • 后续我们学习Koa的源码,来看一下它是一个怎么样的函数;

koa通过创建的app对象,注册中间件只能通过use方法:

  • Koa并没有提供methods的方式来注册中间件;
  • 也没有提供path中间件来匹配路径;

但是真实开发中我们如何将路径和method分离呢?

  • 方式一:根据request自己来判断;
  • 方式二:使用第三方路由中间件;

方式一:根据request自己判断

app.use((ctx, next) => {
  if (ctx.request.path === '/users') {
    if (ctx.request.method === 'POST') {
      ctx.response.body = "Create User Success~";
    } else {
      ctx.response.body = "Users List~";
    }
  } else {
    ctx.response.body = "Other Request Response";
  }
})

整个代码的逻辑是非常复杂和混乱的,真实开发中我们会使用路由。


1.3. 路由的使用


koa官方并没有给我们提供路由的库,我们可以选择第三方库:koa-router


1.3.1. 安装koa-router


因为是第三方的库,所以我们需要单独下项目中安装:

npm install koa-router


1.3.2. koa-router基本使用


我们可以先封装一个 user.router.js 的文件:

const Router = require('koa-router');
const userRouter = new Router();
userRouter.get('/users', (ctx, next) => {
  ctx.response.body = "user list~";
});
userRouter.post('/users', (ctx, next) => {
  ctx.response.body = "create user info~";
});
module.exports = userRouter;

在app中将router.routes()注册为中间件:

app.use(userRouter.routes());
app.use(userRouter.allowedMethods());

注意:allowedMethods用于判断某一个method是否支持:

  • 如果我们请求 get,那么是正常的请求,因为我们有实现get;
  • 如果我们请求 put、delete、patch,那么就自动报错:Method Not Allowed,状态码:405;
  • 如果我们请求 link、copy、lock,那么就自动报错:Not Implemented,状态码:501;


1.3.3. router的前缀


通常一个路由对象是对一组相似路径的封装,那么路径的前缀都是一直的,所以我们可以直接在创建Router时,添加前缀:

const userRouter = new Router({prefix: '/users'});
userRouter.get('/', (ctx, next) => {
  ctx.response.body = "user list~";
});
userRouter.post('/', (ctx, next) => {
  ctx.response.body = "create user info~";
});
module.exports = userRouter;


1.4. 请求解析


客户端传递到服务器参数的方法常见的是5种:

  • 方式一:通过get请求中的URL的params;
  • 方式二:通过get请求中的URL的query;
  • 方式三:通过post请求中的body的json格式;
  • 方式四:通过post请求中的body的x-www-form-urlencoded格式;
  • 方式五:通过post请求中的form-data格式;


1.4.1. 方式一:params


请求地址:http://localhost:8000/users/123

获取params:

const userRouter = new Router({prefix: "/users"})
userRouter.get("/:id", (ctx, next) => {
  console.log(ctx.params.id);
  ctx.body = "Hello World";
})


1.4.2. 方式二:query


请求地址:http://localhost:8000/login?username=why&password=123

获取query:

app.use((ctx, next) => {
  console.log(ctx.request.query);
  ctx.body = "Hello World";
})


1.4.3. 方式三:json


请求地址:http://localhost:8000/login

body是json格式:

{
    "username": "coderwhy",
    "password": "123"
}

获取json数据:

  • 安装依赖:npm install koa-bodyparser;
  • 使用 koa-bodyparser的中间件;
app.use(bodyParser());
app.use((ctx, next) => {
  console.log(ctx.request.body);
  ctx.body = "Hello World";
})


1.4.4. 方式四:x-www-form-urlencoded


请求地址:http://localhost:8000/login

body是x-www-form-urlencoded格式:

image.png                                           x-www-form-urlencoded

获取json数据:(和json是一致的)

  • 安装依赖:npm install koa-bodyparser;
  • 使用 koa-bodyparser的中间件;
app.use(bodyParser());
app.use((ctx, next) => {
  console.log(ctx.request.body);
  ctx.body = "Hello World";
})


1.4.5. 方式五:form-data


请求地址:http://localhost:8000/login

body是form-data格式:

image.png                                                        form-data

解析body中的数据,我们需要使用multer

  • 安装依赖:npm install koa-multer;
  • 使用 multer中间件;
const upload = multer({
});
app.use(upload.any());
app.use((ctx, next) => {
  console.log(ctx.req.body);
  ctx.body = "Hello World";
});

我们知道multer还可以实现文件的上传:

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "./uploads/")
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname))
  }
})
const upload = multer({
  storage
});
const fileRouter = new Router();
fileRouter.post("/upload", upload.single('avatar'), (ctx, next) => {
  console.log(ctx.req.file);
})
app.use(fileRouter.routes());


1.5. 响应方式


输出结果:body

将响应主体设置为以下之一:

  • string :字符串数据
  • Buffer :Buffer数据
  • Stream :流数据
  • Object|| Array:对象或者数组
  • null :不输出任何内容

如果response.status尚未设置,Koa会自动将状态设置为200204

比较常见的输出方式:

ctx.response.body = "Hello World";
ctx.body = {
  name: "why",
  age: 18,
  height: 1.88
};
ctx.body = ["abc", "cba", "nba"];

疑惑:ctx.response.bodyctx.body之间的区别:

  • 事实上,我们访问ctx.body时,本质上是访问ctx.response.body;
  • 我们可以看到源码中,我们访问 proto(这里就是ctx),其实是访问proto中的response的属性;

image.png

请求状态:status

请求状态我们可以直接给ctx设置,或者给ctx.response设置也是一样的效果:

ctx.status = 201;
ctx.response.status = 204;


1.6. 错误处理


const Koa = require('koa');
const app = new Koa();
app.use((ctx, next) => {
  ctx.app.emit('error', new Error("哈哈哈"), ctx);
})
app.on('error', (err, ctx) => {
  console.log(err.message);
  ctx.response.body = "哈哈哈";
})
app.listen(8000, () => {
  console.log("错误处理服务启动成功~");
})


1.7. 静态服务器


koa并没有内置部署相关的功能,所以我们需要使用第三方库:

npm install koa-static

部署的过程类似于express:

const Koa = require('koa');
const static = require('koa-static');
const app = new Koa();
app.use(static('./build'));
app.listen(8000, () => {
  console.log("静态服务器启动成功~");
});


1.8. 源码解析


视频里面有讲解,这里不再截图


二. 和express对比


在学习了两个框架之后,我们应该已经可以发现koa和express的区别:

从架构设计上来说:

  • express是完整和强大的,其中帮助我们内置了非常多好用的功能;
  • koa是简洁和自由的,它只包含最新的功能,并不会对我们使用其他中间件进行任何的限制。
  • 甚至是在app中连最基本的get、post都没有给我们提供;
  • 我们需要通过自己或者路由来判断请求方式或者其他功能;

因为express和koa框架他们的核心其实都是中间件:

  • 但是他们的中间件事实上,它们的中间件的执行机制是不同的,特别是针对某个中间件中包含异步操作时;
  • 所以,接下来,我们再来研究一下express和koa中间件的执行顺序问题;

我通过一个需求来演示所有的过程:

  • 假如有三个中间件会在一次请求中匹配到,并且按照顺序执行;
  • 我希望最终实现的方案是:
  • 注意:是middleware1中;
  • 在middleware1中,在req.message中添加一个字符串 aaa
  • 在middleware2中,在req.message中添加一个 字符串bbb
  • 在middleware3中,在req.message中添加一个 字符串ccc
  • 当所有内容添加结束后,在middleware1中,通过res返回最终的结果;


2.1. 同步执行顺序


假如我们获取的所有数据,是可以同步获取的;

我们先通过express实现这个过程:

const express = require('express');
const app = express();
const middleware1 = (req, res, next) => {
  req.message = "aaa";
  next();
  res.end(req.message);
}
const middleware2 = (req, res, next) => {
  req.message = req.message + 'bbb';
  next();
}
const middleware3 = (req, res, next) => {
  req.message = req.message + 'ccc';
}
app.use(middleware1, middleware2, middleware3);
app.listen(8000, () => {
  console.log("启动成功~");
})

最终的结果是:aaabbbccc,没问题;

我们再通过koa实现这个过程:

const Koa = require('koa');
const app = new Koa();
const middleware1 = (ctx, next) => {
  ctx.message = "aaa";
  next();
  console.log("aaaa");
  ctx.body = ctx.message;
}
const middleware2 = (ctx, next) => {
  ctx.message = ctx.message + 'bbb';
  console.log("bbbb");
  next();
}
const middleware3 = (ctx, next) => {
  ctx.message = ctx.message + 'ccc';
}
app.use(middleware1);
app.use(middleware2);
app.use(middleware3);
app.listen(8000, () => {
  console.log("启动成功~");
})

最终的结果也是:aaabbbccc,也没问题;


2.2. 异步执行顺序


但是,如果我们最后的ccc中的结果,是需要异步操作才能获取到的,是否会产生问题呢?


2.2.1. express中遇到异步操作


express有异步操作(没有在next前,加async、await):

const middleware1 = (req, res, next) => {
  req.message = "aaa";
  next();
  res.end(req.message);
}
const middleware2 = (req, res, next) => {
  req.message = req.message + 'bbb';
  next();
}
const middleware3 = async (req, res, next) => {
  const result = await axios.get('http://123.207.32.32:9001/lyric?id=167876');
  req.message = req.message + result.data.lrc.lyric;
  console.log(req.message);
}

最终的结果aaabbb,是不正确。

express有异步操作(有在next前,加async、await):

const middleware1 = async (req, res, next) => {
  req.message = "aaa";
  await next();
  res.end(req.message);
}
const middleware2 = async (req, res, next) => {
  req.message = req.message + 'bbb';
  await next();
}
const middleware3 = async (req, res, next) => {
  const result = await axios.get('http://123.207.32.32:9001/lyric?id=167876');
  req.message = req.message + result.data.lrc.lyric;
  console.log(req.message);
}

最终的结果也是aaabbb,也是不正确。

为什么呢?

  • 原因是本质上的next()和异步没有任何关系;
  • 它本身就是一个同步函数的调用,所以它不会等到你异步有结果之后,再继续执行后续的操作;

image.png


2.2.2. koa中遇到异步操作


koa有异步操作(没有在next前,加async、await):

const middleware1 = async (ctx, next) => {
  ctx.message = "aaa";
  next();
  ctx.body = ctx.message;
}
const middleware2 = async (ctx, next) => {
  ctx.message = ctx.message + 'bbb';
  next();
}
const middleware3 = async (ctx, next) => {
  const result = await axios.get('http://123.207.32.32:9001/lyric?id=167876');
  ctx.message = ctx.message + result.data.lrc.lyric;
}

最终的结果也是aaabbb,也是不正确。

  • 这是因为虽然next函数是一个返回promise的异步操作,但是在前面不加await的情况,是不同等待结果的返回,就会继续向后执行了;

koa有异步操作(有在next前,加async、await):

const middleware1 = async (ctx, next) => {
  ctx.message = "aaa";
  await next();
  ctx.body = ctx.message;
}
const middleware2 = async (ctx, next) => {
  ctx.message = ctx.message + 'bbb';
  await next();
}
const middleware3 = async (ctx, next) => {
  const result = await axios.get('http://123.207.32.32:9001/lyric?id=167876');
  ctx.message = ctx.message + result.data.lrc.lyric;
}

最终的结果是aaabbb+歌词信息,是正确。

  • 这是因为,当我们在koa中的next前面加await时,它会等到后续有一个确定结果时,在执行后续的代码;
相关文章
|
1月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
1月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
1月前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
5月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
1月前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
7月前
|
移动开发 数据挖掘 开发者
服务器发送事件(SSE)在现代Web开发中的关键作用
服务器发送事件(SSE)是HTML5标准协议,用于服务器主动向客户端推送实时数据,适合单向通信场景。相比WebSocket,SSE更简洁高效,基于HTTP协议,具备自动重连、事件驱动等特性。常见应用场景包括实时通知、新闻推送、数据分析等。通过Apipost等工具可轻松调试SSE,助力开发者构建高效实时Web应用。示例中,电商平台利用SSE实现秒杀活动通知,显著减少延迟并简化架构。掌握SSE技术,能大幅提升用户体验与开发效率。
|
4月前
|
C# 图形学 开发者
Unity开发中使用UnityWebRequest从HTTP服务器下载资源。
总之,UnityWebRequest就是游戏开发者手中的万能钓鱼竿,既可以获取文本数据,也能钓上图片资源,甚至是那声音的涟漪。使用UnityWebRequest的时候,你需要精心准备,比如确定URL、配置请求类型和头信息;发起请求;巧妙处理钓获的数据;还需要机智面对网络波澜,处理各种可能出现的错误。按照这样的过程,数据的钓取将会是一次既轻松愉快也效率高效的编程钓鱼之旅。
225 18
|
4月前
|
JSON JavaScript 前端开发
JavaScript入门干货:蓝桥杯Web组分章学习笔记(基于蓝桥云课《JavaScript基础入门》)
这是一份详尽的JavaScript学习笔记,涵盖基础到进阶内容。包括变量、运算符、数组、字符串操作,DOM/BOM事件处理,内置对象(如Array、Date、Math)用法,JSON格式解析,以及函数作用域与闭包等核心概念。同时深入探讨值类型和引用类型的差异、异常处理机制,并介绍函数高级特性如call/apply/bind方法、递归及arguments对象。代码按章节分点整理,注释细致,适合初学者系统掌握JavaScript编程知识。
89 2
|
6月前
|
Go API 定位技术
MCP 实战:用 Go 语言开发一个查询 IP 信息的 MCP 服务器
随着 MCP 的快速普及和广泛应用,MCP 服务器也层出不穷。大多数开发者使用的 MCP 服务器开发库是官方提供的 typescript-sdk,而作为 Go 开发者,我们也可以借助优秀的第三方库去开发 MCP 服务器,例如 ThinkInAIXYZ/go-mcp。 本文将详细介绍如何在 Go 语言中使用 go-mcp 库来开发一个查询 IP 信息的 MCP 服务器。
382 0