vue轮询访问后端接口代码示例

当使用Vue轮询访问后端接口时，你可以在Vue组件中使用`setInterval`函数来定时发送请求。以下是一个简单的示例代码：

<template>
  <div>
    <h1>{{ responseData }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      responseData: ''
    }
  },
  mounted() {
    this.startPolling() // 组件挂载后开始轮询
  },
  methods: {
    fetchData() {
      // 发送请求到后端接口
      // 这里使用axios作为示例，你也可以使用其他HTTP库
      axios.get('your-backend-api-url')
        .then(response => {
          this.responseData = response.data
        })
        .catch(error => {
          console.error(error)
        })
    },
    startPolling() {
      this.fetchData() // 首次发送请求

      // 设置轮询时间间隔（这里设置为每5秒发送一次请求）
      setInterval(() => {
        this.fetchData()
      }, 5000)
    }
  }
}
</script>

在上面的示例中，当组件挂载后，`mounted`钩子函数会调用`startPolling`方法开始轮询。`startPolling`方法首先发送一次请求，然后使用`setInterval`函数每5秒发送一次请求。每次请求成功后，响应数据会存储在`responseData`属性中，并在模板中显示。

请替换`your-backend-api-url`为你实际的后端接口URL。另外，确保在组件中导入并使用了适当的HTTP库（如axios）来发送请求。