现在有个需求前台页面不刷新,但是数据需要实时返回,那就是调用接口外加定时器:
data中定义空数组用来接收存储数据
tableData: []
添加请求和刷新
methods: {
async getdata() {
//用来请求你的接口吧
const { data: res } = await this.$http.get("static/home.json");
console.log("结果");
console.log(res.result);
this.tableData = res.result;
},
//定时刷新
initSetTimeout(today) {
setInterval(() => {
this.getdata(today);
}, 10000);
},
}
页面打开执行
created() {
//页面打开就执
this.getdata();
const date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
myDate = date.getDate();
(this.today = `${year}/${month < 10 ? "0" + month : month}/${
myDate < 10 ? "0" + myDate : myDate
}`),
this.getdata(this.today);
this.initSetTimeout(this.today); //调用每隔10秒刷新数据
},
效果:
image.png
全部代码:
//导入vuex
export default {
data() {
return {
//设置当前的菜单是否折叠:
tableData: []
};
},
created() {
//页面打开就执行
this.getMenu();
this.getdata();
const date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
myDate = date.getDate();
(this.today = `${year}/${month < 10 ? "0" + month : month}/${
myDate < 10 ? "0" + myDate : myDate
}`),
this.getdata(this.today); //input显示当前时间
this.initSetTimeout(this.today); //调用每隔10秒刷新数据
},
//方法,空格
methods: {
async getdata() {
const { data: res } = await this.$http.get("http://localhost:3000/all");
console.log("结果11");
console.log(res.date);
this.tableData = res.date
},
initSetTimeout(today) {
setInterval(() => {
this.getdata(today);
}, 10000);
},
};
网友评论