Vue轮询请求详解

一、轮询请求的概念

轮询请求是一种前端向后端不断发送请求，在收到响应后重新发送请求的方式，以达到不间断更新数据的目的。与长连接相比，轮询请求可以更好地控制数据请求的频率，同时也比短轮询更稳定。

二、Vue的实现方式

Vue提供了两种方式实现轮询请求，一种是使用定时器setInterval()，另一种则是通过递归setTimeout()实现。下面是两种方式的代码实现：

// 使用setInterval()方式实现
export default {
  data() {
    return {
      message: '',
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.getMessage()
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getMessage() {
      axios.get('/api/message').then((res) => {
        this.message = res.data
      })
    }
  }
}

// 使用递归setTimeout()方式实现
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.getMessage()
  },
  methods: {
    getMessage() {
      axios.get('/api/message').then((res) => {
        this.message = res.data
        setTimeout(() => {
          this.getMessage()
        }, 3000)
      })
    }
  }
}

三、添加loading效果和错误处理

为了提升用户体验，在轮询请求过程中可以添加loading效果提示，同时还需要处理可能出现的错误。下面是做法：

export default {
  data() {
    return {
      message: '',
      loading: false,
      error: null
    }
  },
  mounted() {
    this.getMessage()
  },
  methods: {
    getMessage() {
      this.loading = true // 显示loading效果
      axios.get('/api/message').then((res) => {
        this.message = res.data
        this.loading = false // 隐藏loading效果
        this.error = null // 清空错误提示
        setTimeout(() => {
          this.getMessage()
        }, 3000)
      }).catch((err) => {
        console.log(err)
        this.loading = false // 隐藏loading效果
        this.error = '请求出错，请稍后再试' // 显示错误提示
        setTimeout(() => {
          this.getMessage()
        }, 5000) // 若请求出错，则5秒后重发请求
      })
    }
  }
}

四、优化轮询请求

为了节省带宽和提高性能，轮询请求也需要优化。以下是几种优化方式：

1. 减少请求次数

可以使用vue的watch监听数据变化，只有在数据发生变化时再发送请求，这样就不必每次都发送请求，减少了请求次数。

export default {
  data() {
    return {
      message: '',
      loading: false,
      error: null,
      prevMessage: '' // 保存上一次获取的消息
    }
  },
  mounted() {
    this.getMessage()
  },
  watch: {
    message(newVal, oldVal) {
      if (newVal !== oldVal) { // 只有在数据发生变化时才发送请求
        this.prevMessage = newVal // 保存当前的消息
        this.getMessage()
      }
    }
  },
  methods: {
    getMessage() {
      this.loading = true
      axios.get('/api/message').then((res) => {
        this.message = res.data
        this.loading = false
        this.error = null
        setTimeout(() => {
          this.getMessage()
        }, 3000)
      }).catch((err) => {
        console.log(err)
        this.loading = false
        this.error = '请求出错，请稍后再试'
        setTimeout(() => {
          this.getMessage()
        }, 5000)
      })
    }
  }
}

2. 节流

使用节流函数可以限制请求的频率，避免过于频繁的请求。

export default {
  data() {
    return {
      message: '',
      loading: false,
      error: null,
      prevMessage: '',
      timer: null
    }
  },
  mounted() {
    this.getMessage()
  },
  watch: {
    message(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.prevMessage = newVal
        this.throttle(this.getMessage, 3000) // 限制每3秒只能发送一次请求
      }
    }
  },
  methods: {
    getMessage() {
      this.loading = true
      axios.get('/api/message').then((res) => {
        this.message = res.data
        this.loading = false
        this.error = null
        this.prevMessage = this.message // 保存当前的消息
      }).catch((err) => {
        console.log(err)
        this.loading = false
        this.error = '请求出错，请稍后再试'
      })
    },
    throttle(fn, delay) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        fn()
      }, delay)
    }
  }
}

五、总结

轮询请求是一种不间断更新数据的方式，Vue提供了两种实现方式，即使用定时器和递归setTimeout。在轮询请求过程中，需要添加loading效果和错误处理，并且需要优化请求次数和请求频率，以提升性能和减少带宽消耗。