Node模拟慢接口

为了快速搭建一个后台服务,并模拟慢接口,我们选择 Koa 这个轻量的 Node 框架。

快速开始

Koa 使用起来非常方便,只需要:

  1. 新建项目文件夹:mkdir koa-server
  2. 创建 package.json:npm init -y
  3. 安装 Koa:npm i koa
  4. 编写服务代码:vi app.js
  5. 启动:node app.js
  6. 访问: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 多才真正返回结果。

猜你喜欢

转载自blog.csdn.net/hyupeng1006/article/details/130811415