背景

在项目中，大的人群包的上传，后端同学需要异步的处理一些逻辑（校验等），然后在页面中展示处理的结果。大致的流程如下图：

后端下载文件，处理文件是一个异步的过程，为了获取处理的结果，所以采用了http轮询的方式来实现。

这里记录一下具体的实现和需要注意的点

实现原理

不断的调用需要轮询的http接口，获取所要的数据。一图胜千言

http_polling.png

代码实现

下面是具体的代码实现，递归实现。

  1. // 最大的存活时间
  2. const TTL = 5 * 1000 * 1000
  3. const startTime = new Date().getTime()
  4. async function polling() {
  6.   // 超过存活时间结束
  7.   const endTime = new Date().getTime()
  8.   if (endTime - startTime > TTL) {
  9.     return
  10.   }
  12.   // 这里的remoteCall是一个虚拟的函数，指代需要轮询的http接口
  13.   const response = await remoteCall()
  15.   // 这里的状态可以基于http，也可以自己定义自己的结构来处理。这里用200和非200做一个事例
  16.   if (response.status === 200) {
  17.     return response
  18.   } else {
  19.     // 这里可以看情况设定一个间隔时间。
  20.     // 复杂一点的可以设定一些间隔时间策略： 比如根据请求次数增加，增加间隔时间等等
  21.     // 这里只是一个例子，等待5秒
  22.     await new Promise(resolve => setTimeout(resolve, 5000));
  23.     return await polling()
  24.   }
  25. }

总结

实现的思路是简单直接的，主要的几个注意点：

  • 一定要定义好接口返回的各种状态的含义
  • 一定要增加退出机制 - 超时时间、强制cancel请求等等
  • 尽量增加间隔时间策略，减少无必要的反复连接