vue数据大屏并发请求

并发? 处理并发

因为js是单线程的，所以前端的并发指的是在极短时间内发送多个数据请求，比如说循环中发送 ajax , 轮询定时器中发送 ajax 请求. 然后还没有使用队列, 同时发送的.

1. Promise.all

可以采用Promise.all处理并发，当所有promise全部成功时, 会走.then，并且可以拿到所有promise中传进resolve中的值

Promise.all([ WsApi.querySpyTaskSummary(), WsApi.querySpyTask(), ]).then((res) => { console.timeEnd(); });

2. async/await (个人喜欢用这个)

javascript 复制代码

  data() {
    return {
        timer: null, // 定时器名称 队列
        timerRefresh: null, // 定时器 2小时刷新页面 
    }
  },

  mounted() {
    this.startTimer() // 定时发送请求获取数据并更新对象 3s
    this.startTimerRefresh() // 定时刷新页面 2h 

    // this.startDayCap()// 日产能 3s
    // this.startMonthCap() // 月产能 5s
    // this.startOnlineTime()// 在线时长（小时） 10s
  },

  beforeDestroy() {
    // console.log('关闭定时器')
    if (this.timer) {
      clearInterval(this.timer)
      clearInterval(this.timerRefresh)

      // clearInterval(this.timerDayCap)
      // clearInterval(this.timerMonthCap)
      // clearInterval(this.timerOnlineTime)
    }
  },
  methods: {
    // #####################################################################
    // 定时器 队列
    startTimer() {
      this.fetchAll() // 开始请求一次

      if (this.timer) clearInterval(this.timer) // 清空上一个定时器
      // 开启定时器
      this.timer = setInterval(() => {
        this.fetchAll() // 机器人状态汇总

        // 优化释放异步资源方案未使用
        // setTimeout(() => {
        //   this.fetchAll() // 机器人状态汇总
        // }, 0)
      }, 3000)
    },
    //定时刷新页面
    startTimerRefresh() {
      if (this.timerRefresh) clearInterval(this.timerRefresh)
      this.timerRefresh = setInterval(() => {
        window.location.reload(true)
        // 刷新
        console.log("刷新");
      }, 2 * 60 * 60 * 1000) // 2 h
    },

    //
    //
    //
    async fetchAll() {
      // 日产能定时器
      await WeldHomeGetGroupDayCap().then(res => {
        // console.log(res, '日--------------');
        if (res.code === 200) {
          // 
          // this.props_productComponent_day = {}
          // 
          this.props_productComponent_day = {
            dataName: res.data.map(item => item.robotName),
            dataNum: res.data.map(item => item.realCap.toFixed(2) * 1)
          }
          // console.log(this.props_productComponent_day);
        } else {
          // this.msgError('err')
        }
      }).catch(err => {
      })
      // 月产能
      await WeldHomeGetGroupMonthCap().then(res => {
        // console.log(res, '月产能--------------');
        if (res.code === 200) {
          // 
          // this.props_productComponent_month = {}
          // 
          // const seriesData = day_xAxis_series_Data.map((item, index) => {
          //   return item.map(item => {
          //     return Number(item.rate)
          //   })
          // })

          this.props_productComponent_month = {
            robotNameList: res.data.map(item => item.robotName), // x轴
            seriesData: res.data.map(item => item.realCap.toFixed(2) * 1)  // y轴
          }
        } else {
          // this.msgError('err')
        }

      }).catch(err => {
      })
        
      // 放 try catch也可以的,因为有的会结合使用
      try {
         // let 变量1
         // let 变量2

         // await 1
         // await 2
      } catch (error) {
        // console.log(111);
      }
   }

每隔几秒请求一次接口（轮询）页面过段时间会卡死?

如果要求不高的话,最简单的就是定时刷新, 如上边的2小时刷新方案.

当然,首先我们要排查是哪方面的错误, 后端接口的问题,还是前端代码执行顺序的问题,并发是否串行了. 等等......

eg: 某个页面放置一段时间（几分钟,几小时,几天），点不了，刷新页面也要很长时间才能响应或者不响应. 卡顿问题，只有关闭页面，重新打开才正常 ===>>> 浏览器内存堆满问题, 比较明显的,谷歌快照能看到 (performance快照、memory快照)

轮询定时器清除 + vue2.0_vue监听缓存数据变化后清除定时器-CSDN博客文章浏览阅读563次，点赞9次，收藏10次。轮询定时器清除 + vue2.0_vue监听缓存数据变化后清除定时器https://blog.csdn.net/qq_60839348/article/details/135534331

单纯使用setInterval会使页面卡死，setTimeout自带清除缓存，组合使用实现轮询可解决浏览器崩溃

javascript 复制代码

window.setInterval(() => {
  setTimeout(fun, 0)
}, 30000

javascript 复制代码

<script>
export default {
 data() {
  return {
   num: 0,
   timer: null,
  };
 },
 destroyed() {
 //离开页面是销毁
    clearInterval(this.timer);
    this.timer = null;
 },
 created() {
      // 实现轮询
      this.timer = window.setInterval(() => {
        setTimeout(this.getProjectList(), 0); // 发送请求
      }, 3000);
 },
 methods: {
    stop() {
      clearInterval(this.timer);
      this.timer = null;
    },
    // 请求是否有新消息
    getProjectList() {
        console.log("请求" + this.num++ + "次");
        if(this.num==8){
        this.stop() 
    }
  }
 }
};
</script>