并发? 处理并发

因为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 (个人喜欢用这个)

  data() {return {timer: null, // 定时器名称 队列timerRefresh: null, // 定时器 2小时刷新页面 }},mounted() {this.startTimer() // 定时发送请求获取数据并更新对象 3sthis.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自带清除缓存，组合使用实现轮询可解决浏览器崩溃 

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

<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>