vue如何定时请求一次后端接口完整代码
时间: 2023-08-14 18:04:34 浏览: 225
vue 请求后台数据的实例代码
首先需要在Vue组件中使用定时器函数`setInterval()`来实现定时请求后端接口。在组件中定义一个data属性,用来存储后端返回的数据,然后在组件的`created()`钩子函数中调用请求接口函数。
以下是一个示例代码:
```html
<template>
<div>
<p>后端返回的数据: {{ responseData }}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
responseData: ''
}
},
created() {
// 每隔5秒请求一次后端接口
setInterval(() => {
this.getData()
}, 5000)
},
methods: {
getData() {
axios.get('/api/data')
.then(response => {
this.responseData = response.data
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
```
在上面的代码中,我们使用了`axios`库来发送GET请求获取后端接口数据,并将数据存储在组件的`responseData`属性中。`setInterval()`函数每隔5秒钟就会调用`getData()`函数一次,从而实现定时请求后端接口的效果。
阅读全文