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

一时失言乱红尘 2022-12-03 09:07 288阅读 0赞

## 前言 ##

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

有时候，需要实现 **页面停留时每隔一段时间请求后端接口更新最新数据** ，就比如我现在这个项目，它就需要每隔一段时间进行刷新，以确保数据是最新的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_cnter]

## 逻辑图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_cnter 1]

## 实现 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_cnter]: /images/20221123/8969c5ea94b44f4f87455c26df153506.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_cnter 1]: /images/20221123/23e024126069470b95925df7af072c0e.png