• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

处理小程序网络请求异步执行的问题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

这两天写微信小程序注意到了有些时候会发现使用this.data.list拿到的是空数据,但是明明自己已经请求到了数据了。这就很让人头疼。

原因:因为wx.request是一个异步的请求,所以数据请求的同时,可以继续向下执行函数。所以这里值还没有赋值上就开始打印了变量的值

比如:以下代码在执行的时候 this.updateData()this.updateState()不会分先后,可能先执行前者,可能先执行后者。如果先执行后者的话就先打印list数组了,那么这个时候因为前者是请求数据的,还未执行呢就已经打印list数组了,那么这个时候拿到的肯定是一个空数组。

Page({
  data: {
  list: []
  },
  onload: function() {
    this.updateData();
    this.updateState();
  },
  updateData: function() {   //请求数据
    var that = this
    wx.request({
    url: XXXXX, //你的请求地址
    data: {},
    success: function(res) {
    that.setData({
      list: this.data.data
      }
    }
  })
  },
  updateState: function() {
    var list = this.data.list
    console.log(list)
    //进行数据状态判断
    },
})

这样运行的时候,还没有等到updateData更新到数据,已经在执行updateState了,这样得到的结果往往是不正确的,于是找方法发现了ES6 的promise
promise的用法为:

const promist = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})

改造后代码:

Page({
  data: {
  list: []
  },
  onload: function() {
    var that =this
    new Promise(function(resolve,reject){
        that.updateData(resolve);
    }).then(function(){
        that.updateState();
    })
  },
  //请求数据
  updateData: function(resolve) {
    var that = this
    wx.request({
    url: XXXXX, //你的请求地址
    data: {},
    success: function(res) {
    that.setData({
      list: this.data.data
      if(resolve!=null){
        resolve(\'ok\')
        }
      }
    }
  })
  },
  //拿数据打印
  updateState: function() {
    var list = this.data.data
    console.log(list)
    //进行数据状态判断
    },
})

这样就能保证updateData执行完了之后才执行updateState

还有一个笨方法就是定时器了,先执行请求数据的代码updateData,等过一会再执行打印数据的代码updateState
当然这种方法是不可取的,最好的办法就是用promise来解决这种异步操作


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[转]微信小程序开发:http请求 - freeliver54发布时间:2022-07-18
下一篇:
微信小程序网络封装-简单高效发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap