Vue项目实战04 : Vue 轮询接口的实现

项目中我们经常需要实现轮询-每隔几秒请求一次接口刷新数据

一般都会使用setInterval，但要注意单纯使用它会导致页面卡死，所以一定要清除定时器

setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。
但是setTimeout是自带清除定时器的

mounted () {
    const timer = window.setInterval(() => {
      setTimeout(function () {
      // chooseProduct 自己封装的axios请求 
        chooseProduct({
          'promptKey': 'selectitem',
          'serialNum': '000'
        }).then(res => {
           //视情况而定
          if (res.data.code === 0 ) {
            // 这里可以写一些中止轮询的条件 比如code值返回0时  
            clearInterval(timer)
          }
        })
      }, 0)
    }, 2000)
    // 清除定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

封装

// polling-utils.js

/**
     * @descripting 轮询功能
     * @param {String} type 请求类型
     * @param {String} url 地址 
     * @param {Object} data 请求数据 
     * @param {Number} delay 轮询间隔时间
     */
    export default function polling(type, url, data, delay = 1000) {
        return new Promise((resolve, reject) =>{
            ajax[type](url, data).then(res => {
                if (res.data === 'polling') {  // 这个继续进行轮询的条件，需要根据自己的需要修改
                    setTimeout(() => {
                        resolve(polling(type, url, data, delay));
                    }, delay)
                } else {
                   resolve(res);
               }
           })
       })
    }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

使用

import polling from 'utils/polling-utils';

polling('post', url, data).then(res => { console.log(res) })


  

 

  
1
  
2
  
3
  
4
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/109078287