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

• 使用场景：前端首次发起请求获取数据，若失败则每隔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)}