写一个vue前端代码示例,用于定时刷新某个后端接口
时间: 2024-01-21 09:02:08 浏览: 96
vue 上拉刷新,vue2.0写的一个demo
好的,以下是一个使用Vue实现定时刷新后端接口的示例代码:
```html
<template>
<div>
<h1>定时刷新后端接口示例</h1>
<p>当前时间:{{ currentTime }}</p>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} - {{ item.description }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [], // 后端接口返回的数据
intervalId: null, // 定时器的 ID
currentTime: new Date().toLocaleString(), // 当前时间
};
},
created() {
// 在组件创建时开始定时刷新数据
this.intervalId = setInterval(() => {
this.fetchData();
}, 5000); // 每 5 秒刷新一次数据
},
destroyed() {
// 在组件销毁时清除定时器
clearInterval(this.intervalId);
},
methods: {
async fetchData() {
// 使用 axios 发起 GET 请求获取后端接口数据
const response = await axios.get('/api/items');
this.items = response.data;
this.currentTime = new Date().toLocaleString(); // 更新当前时间
},
},
};
</script>
```
这个示例中,我们在组件的 `created` 钩子函数中开始一个每 5 秒执行一次的定时器,定时器的回调函数会调用 `fetchData` 方法,该方法使用 axios 发起 GET 请求获取后端接口数据,并更新组件的 `items` 数据和 `currentTime` 数据。在组件销毁时,我们清除定时器,以避免内存泄漏。
阅读全文