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

前言

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

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

逻辑图

实现

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

  },

})