小程序下拉刷新,如何等待数据返回再收起loading

小程序下拉刷新 重新请求

关于我上面封装的请求网络
小程序封装网络请求

// 封装一个轮播图获取数据函数
  async getBannerData(){
    // 封装返回的是一个promise对象,我们可以使用async,await ex7的新语法
      const bannerPormise =get('/home/swiperdata')
      const res= await bannerPormise
      this.setData({bannerData:res.data.message})
      // 返回一个promise对象是因为下拉刷新我们需要 重新获取数据,监听数据回来,
      //就需要promise.all()方法监听一个数组,数组里面的元素为promise对象,
      return bannerPormise
    },
    // 封装获取分类列表的函数
   async getCategoryData(){
      const CategoryPromise = get('/home/catitems')
      const res= await CategoryPromise
      this.setData({navList:res.data.message})
      return CategoryPromise
    },
    // 封装获取楼层数据函数
    async getFroolData(){
      const froolPromise =get('/home/floordata')
      const res =await froolPromise
      this.setData({floordata:res.data.message})
      return froolPromise
    },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 进页面先请求数据
    this.getBannerData()
    this.getCategoryData()
    this.getFroolData()
  }

用户下拉刷新 我们需要在页面配置上设置

{
//index.json 文件中配置
  "enablePullDownRefresh":true  //开启这个属性,页面才能下拉刷新
}

监听用户下拉刷新的API

onPullDownRefresh: function() {}

停止下拉刷新动画

wx.stopPullDownRefresh();

如何等待所有数据再触发停止loading,就是使用Promise.all()方法

Promise.all([ promise对象,promise对象,promise对象]).then( () => { console.log('所有promise都执行完毕了') } )

运行代码

onPullDownRefresh: function() {
      // 下拉后要重新调用获取数据的函数,这里我们需要使用promise.all()方法监听所有异步函数完成数据返回了没有,
      // 确认都返回在执行 wx.stopPullDownRefresh()这个api方法 
     const p1 = this.getBannerData()
     const p2 = this.getCategoryData()  
     const p3 = this.getFroolData()   
    //  获取了返回值,而且还调用了函数哟
    Promise.all([p1,p2,p3]).then((res)=>{    //其实并不需要res
      // 调用停止加载
      wx.stopPullDownRefresh()
    })
  },