前端调取后端接口实现定时刷新

场景:这个地方的时间是需要定时刷新的

setInterval(): 间隔指定的毫秒数不停地执行指定的代码,定时器
clearInterval(): 用于停止 setInterval() 方法执行的函数代码

使用方法:
setInterval(code,time),两个参数都是必须的,第一个参数为要调用的函数或要执行的代码串。第二个参数为周期性执行或调用 code 之间的时间间隔,以毫秒计。

clearInterval(id_of_setinterval),参数是必须的,为setInterval返回的ID值
在这里插入图片描述

  data() {
    return {
      timeUpdate: '',
      dataInterval: 10 * 60 * 1000,//设置定时刷新时间
      updateInterval: null// 定时器标识,清除用
    };
  },
  mounted() {
    const self = this;
    this.getRecentDate();
    this.updateInterval = setInterval(function() {
      self.getRecentDate();
    }, self.dataInterval);// 定时刷新
  },
  beforeDestroy() {
    clearInterval(this.updateInterval);// 清楚定时刷新,不清除会一直运行,关闭页面也会定时刷新
  },

注意:setInterval()与setTimeout()区别
因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次,而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式 所以,完全是不一样的

  • 2
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现多条件筛选,可以使用Vue.js的Axios库来调取后端接口。以下是一个简单的例子: 首先,在Vue组件中定义一个data对象,用于存储筛选条件: ```javascript data() { return { filters: { keyword: '', category: '', date: '' }, results: [] // 存储查询结果 } } ``` 然后,定义一个方法,用于调取后端接口并执行查询: ```javascript methods: { search() { axios.get('/api/search', { params: this.filters }) .then(response => { this.results = response.data; }) .catch(error => { console.log(error); }); } } ``` 在这个例子中,我们使用了Axios的get()方法来调用后端接口,同时将筛选条件作为查询参数传递给后端。在查询成功后,我们将查询结果存储在Vue组件的data对象中,并将其渲染到页面上。 最后,在Vue模板中添加一个表单,让用户输入筛选条件: ```html <form> <input v-model="filters.keyword" placeholder="关键字"> <select v-model="filters.category"> <option value="">所有分类</option> <option value="1">分类1</option> <option value="2">分类2</option> <option value="3">分类3</option> </select> <input v-model="filters.date" type="date"> <button @click.prevent="search">搜索</button> </form> <ul> <li v-for="result in results">{{ result.title }}</li> </ul> ``` 在这个例子中,我们使用了Vue的双向数据绑定(v-model)来将用户输入的筛选条件与Vue组件的data对象进行绑定。当用户点击“搜索”按钮时,Vue会调用search()方法来执行查询,并将查询结果渲染到页面上。 这是一个简单的例子,你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值