微信小程序 – 每隔一段时间请求后端接口获取最新数据(实时刷新数据)

时间:2020-9-3 作者:admin


前言

如果你想直接看实现方案,直接移步最后面。

有时候,需要实现 页面停留时每隔一段时间请求后端接口更新最新数据 ,就比如我现在这个项目,它就需要每隔一段时间进行刷新,以确保数据是最新的:
微信小程序 - 每隔一段时间请求后端接口获取最新数据(实时刷新数据)

逻辑图

微信小程序 - 每隔一段时间请求后端接口获取最新数据(实时刷新数据)

实现

说白了,在 onShow() / onHide() 生命周期函数中注册 定时器 即可。

Page({


  /**
   * 页面的初始数据
   */
  data:
  {
    realTime: null,//实时数据对象(用于关闭实时刷新方法)
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function()
  {

    /**
     * 防止用户拿不到最新数据(因为页面切换会重新计时)
     * 无条件请求一次最新数据
     */
    console.log('请求接口:刷新数据(无条件执行)')
    

    /**
     * 每隔一段时间请求服务器刷新数据(客户状态)
     * 当页面显示时开启定时器(开启实时刷新)
     * 每隔1分钟请求刷新一次
     * @注意:用户切换后页面会重新计时
     */
    this.data.realTime = setInterval(function()
    {
      
      // 请求服务器数据
      console.log('请求接口:刷新数据')
      
      // 反馈提示
      wx.showToast({
        title: '数据已更新!'
      })

    }, 60000)//间隔时间

    // 更新数据
    this.setData({
      realTime:this.data.realTime,//实时数据对象(用于关闭实时刷新方法)

    })
    
  },



  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function()
  {

    /**
     * 当页面隐藏时关闭定时器(关闭实时刷新)
     * 切换到其他页面了
     */
    clearInterval(this.data.realTime)

  },

})
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。