zoukankan      html  css  js  c++  java
  • 前端实现并发请求。

    需求:列表多页勾选实现批量打印流行病学问卷调查,打印出每一个患者(每一条数据)流行病学调查问卷。

    分析:

    通常多页勾选实现批量打印,我们的做法都是,将所有的数据统一传给后端的一个协议,但是这个需求比较特殊,用户要求单独一个患者有一份自己单独打印出来的问卷,同后端讨论后,我们为了实现需求,决定实现的方式为,勾选的数据分别去调用后端打印接口,实现批量单独打印。

    方案确定后,我们有几个问题需要考虑:

    1,如何发送请求,例如页面勾选100条,不可能一下子发送100个请求,因为浏览器有并发请求控制,如果超出并发数,后面的请求将会进入队列等候,我们在等候中的话  有可能会出现浏览器卡死。

    2,如果单个继发,100条请求的话,必须要上一个结束再发送下一个请求,要等100次,这样效率也是很慢的。

    那么为了解决上面两个问题,我们可以把两种方法综合一下,前端实现并发请求,

    先并发假设5条,任意条成功之后,后面的队列加到前面的请求中。

    相当于现在有5个水龙头在排队打水,假设第一个水龙头的人打完水,那么后面的一个人就排到第一个水龙头去,那么相当于前面有5个通道可以排队,大大减少了排队压力。

    代码如何实现,以下代码为整体逻辑框架:

    sendPrint = () => {
      const arrList = Array.from({length:100}, (v,k) => k); // 这边假设生成勾选的100条数据
      const limit = 5; // 并发请求数量
    
      // 请求后台打印协议
      const asyncMethond = () => {
        // some code
      }
    
      // 将所有数据定义成一个数组,这个数组的每一个元素返回一个函数,这个函数里面返回一个异步打印强求
      const asyncFunctionsHandles = arrList.map((item) => {
        return (task) => {
          return asyncMethond().then((res) => {
            const next = asyncFunctionsHandles.shift(); // 队列中还有等待,则取出等待的第一个
            if (next) {
              next(); // 执行这个
            } else {
              console.log('全部执行完成')
            }
          })
        }
      });
    
      const promiseList = [];
      // 实现并发请求
      for (let i = 0; i < limit; i ++) {
        const promiseItemFun = asyncFunctionsHandles.shift();
        promiseList.push(promiseItemFun());
      }
    
      Promise.all(promiseList).then((res) => {
        // 这边可以做一些全部请求完的操作
      })
    }
  • 相关阅读:
    C++_标准模板库STL概念介绍2-泛型编程
    C++_标准模板库STL概念介绍1-建立感性认知
    C++_新特性1-类型转换运算符
    C++_新特性2-RTTI运行阶段类型识别
    C++_异常9-异常的注意事项
    C++_异常8-异常、类和基础
    C++_异常7-exception类
    C++_异常6-其他异常特性
    redis数据类型之—List
    redis数据类型之—Hash
  • 原文地址:https://www.cnblogs.com/yxfboke/p/13497196.html
Copyright © 2011-2022 走看看