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

前言

若是你想直接看实现方案，直接移步最后面。

有时候，须要实现 页面停留时每隔一段时间请求后端接口更新最新数据 ，就好比我如今这个项目，它就须要每隔一段时间进行刷新，以确保数据是最新的：

逻辑图

实现

说白了，在 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)

  },

})