关于前端处理后端轮询的操作 （总结）

• 使用场景：前端首次发起请求获取数据，若失败则每隔1s发起一次知道成功获取数据为止
• 解决方案： 使用轮询操作，涉及定时器的使用和关闭
  （使用vue2代码为例)

data() {
    return {
      pollingResult_en: null, // 处理轮询结果
      bizId_en: ''  // 请求需要携带的参数
    }
  },
  computed: {   // 注意computed和watch的区别
    pollingData() {
      return this.pollingResult_en
    }
  },
  watch: {
    pollingData: function (newval) {
    // 请求数据为null，失败，则轮询
      if (newval == null) {  
        var timer = setInterval(() => {
          setTimeout(() => {
            this.fetchResult(this.bizId_en)
          }, 0);
        }, 1000);
      } else {
        // 请求数据成功，则调用上传文件窗口
        this.$refs['upload'].$children[0].$refs.input.click()
        clearInterval(timer) 
      }
      // 页面关闭的时候结束轮询，使用$once(eventname, eventhandler) 一次性监听事件，beforeDestroy在路由跳转的时候不会触发
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer)
      })
    }
  },
  methods: {
  // 查询接口调用
	  fetchResult() {
	  	 fetchScanResult({ bizId: this.bizId }).then(res => {
	        this.pollingResult = res.data
	      })
	  	}	
  }

下面是一个自己写的一个具体应用中：

  methods: {
  // 查询接口调用
	  fetchResult() {
	  	 fetchScanResult({ bizId: this.bizId }).then(res => {
	        if(res.data){
	        // 关闭定时器
	          clearInterval(this.timer)
	          console.log('获取数据成功')
	        } else {
	          // 轮询
	          this.timer = setInterval(()=>{
	          	setTimeout(() => {
	          		this.fetchResult()
	          	}, 0)
	          }, 1000)
	        }
	      })
	  	}	
  },
  beforeDestroy() {
  	this.clearInterval(this.timer)
  }