0%

利用promise.all基于react+antd+koa实现伪并发loading渲染数据

使用场景

当一个页面的小面板或多个面板里需要调用很多接口, 并且要等待接口返回才渲染界面的时候就可以使promise.all

Demo环境

  • 前端
    • antd: 3.4.1
    • bluebird: 3.5.1
    • react: 16.3.1
    • react-dom: 16.3.1
    • react-scripts-ts: 2.14.0
  • 后端
    • koa: 2.5.0
    • koa-router: 7.4.0

业务场景

设定业务是一个持续交付系统, 里面有用户中心和任务中心和项目中心
现在希望在首页的仪表盘中展示当前用户概览, 角色概览, 任务概览和项目概览.
而这里的概览暂且仅仅是对各个中心的数据的统计, 并简单的以数字的方式展示出来.

效果如图

PS: 此图做了快放处理, 实际上在面板的灰色loading过程需要等待3秒

前端效果

后端设计

分别提供四个查询各个中心概览的接口

  • 用户中心概览: /api/user-survey
  • 角色中心概览: /api/role-survey
  • 任务中心概览: /api/task-survey
  • 产品中心概览: /api/project-survey

PS: 后端代码中设定了角色中心的数据需要3秒才返回, 以此来模拟后端数据返回的延迟性

前端设计

需要实现以下接口请求逻辑和界面渲染规则

  1. 在没有请求数据前且数据没有全部返回前, 界面有loading机制
  2. 要求几乎同时查询四个接口的信息, 并且要等到四个接口的数据都有返回时才渲染数据界面

PS: 第一个要求这里使用antd中的Card标签中的loading属性去完成.

前端主要代码实现

以下代码实现了前端需求, 具体实现请查看注释部分.

文件: src/App.tsx

前后端Demo完全源码

参考