为了快速搭建一个后台服务,并模拟慢接口,我们选择 Koa 这个轻量的 Node 框架。
快速开始
Koa 使用起来非常方便,只需要:
- 新建项目文件夹:
mkdir koa-server
- 创建 package.json:
npm init -y
- 安装 Koa:
npm i koa
- 编写服务代码:
vi app.js
- 启动:
node app.js
- 访问:
http://localhost:3000/
编写服务代码
使用以下命令创建 app.js 启动文件:
vi app.js
在文件中输入以下 3 行代码,即可启动一个 Koa 服务:
const Koa = require('koa'); // 引入 Koa
const app = new Koa(); // 创建 Koa 实例
app.listen(3000); // 监听 3000 端口
访问
如果没有在3000端口启动任务服务,在浏览器访问:
http://localhost:3000/
会显示以下页面:
启动了我们的 Koa Server 之后,访问:
http://localhost:3000/
会显示:
get 请求
刚才搭建的只是一个空服务,什么路由都没有,所以显示了Not Found
。
我们可以通过中间件的方式,让我们的 Koa Server 显示点儿东西。
由于要增加一个根路由,我们先安装路由依赖
npm i koa-router
然后引入 Koa Router
const router = require('koa-router')();
接着是编写get接口
app.get('/', async (ctx, next) => {
ctx.response.body = '<p>Hello Koa Server!</p>';
});
最后别忘了使用路由中间件
app.use(router.routes());
改完代码需要重启 Koa 服务,为了方便重启,我们使用 pm2 这个 Node 进程管理工具来启动/重启 Koa 服务,使用起来也非常简单:
- 全局安装 pm2:npm i -g pm2
- 启动 Koa Server:pm2 start app.js
- 重启 Koa Server:pm2 restart app.js
重启完 Koa Server,再次访问
http://localhost:3000/
会显示以下内容:
post 请求
有了以上基础,就可以写一个 post 接口,模拟慢接口啦!
编写 post 接口和 get 接口很类似:
router.post('/getList', async (ctx, next) => {
ctx.response.body = {
status: 200,
msg: '这是post接口返回的测试数据',
data: [1, 2, 3]
};
});
这时我们可以使用 Postman 调用下这个 post 接口,如期返回:
允许跨域
我们尝试在 NG CLI 项目里调用这个 post 接口:
this.http.post('http://localhost:3000/getList', {
id: 1,
}).subscribe(result => {
console.log('result:', result);
});
但是在浏览器里直接调用,却得不到想要的结果:
- result 没有打印出来
- 控制台报错
- Network请求也是红色的
由于本地启动的项目端口号(4200)和 Koa Server 的(3000)不同,浏览器认为这个接口跨域,因此拦截了。
NG CLI 项目本地链接:
http://localhost:4200/
Koa Server 链接:
http://localhost:3000/
Koa 有一个中间件可以允许跨域:koa2-cors
这个中间件的使用方式,和路由中间件很类似。
先安装依赖:
npm i koa2-cors
然后引入:
const cors = require('koa2-cors');
再使用中间件:
app.use(cors());
这时我们再去访问:
http://localhost:4200/
就能得到想要的结果啦!
慢接口
post 接口已经有了,怎么模拟慢接口呢?
其实就是希望服务器延迟返回结果。
在 post 接口之前增加延迟的逻辑:
async function delay(time) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve();
}, time);
});
}
await delay(5000); // 延迟 5s 返回结果
ctx.response.body = { ... };
再次访问 getList 接口,发现前面接口会一直pending
,5s 多才真正返回结果。