微信小程序异步请求接收不到数据的解决方法

更新时间:2023-02-06 16:42:55 来源:青锋建站 作者:青锋建站
  一些新手或对javascript异步不太了解的微信小程序开发者可能注意到:有些时候使用this.data.list拿到的是空数据,明明自己请求成功了,但不是拿不到数据。以下是青锋建站给大家分享的微信小程序异步请求接收不到数据的解决方法。

异步问题描述

  例如我们在微信小程序的页面中有以下代码片段,getmember功能是获取会员信息,printmember用来输出会员信息,这里的功能仅为青锋建站的演示所用。getmember使用了异步获取会员信息,并将赋值给data中的变量,然后printmember打印出用户名。然而实际中却不能输出数据,这主要是当执行getmember的时候,由于异步占用一定的时间,这时已经执行到printmember这个函数。因此获取不到数据
data: {
 info: '' // 设置一个空变量,在请求数据后将请求结果赋值给该变量
},
getmember() { // 把获取数据的函数简称为A函数
 wx.request({
  url: 'http://www.sjzphp.com',//需要修改为真实api
  success: res => {
   this.setData({
    info: res.data.data[0].info// 将获取到的数据赋值给data中的变量
   })
  console.log("A方法请求到的数据",this.data.info) // 在此将赋值的结果输出
  }
 })
},
printmember() { 
 console.log("B方法调用的数据",this.data.info)
},
onLoad: function () {
 this.getmember() // 在页面加载时执行获取数据的函数
 this.printmember() // 检测是否能正确输出数据
},

微信小程序异步请求

  因为wx.request是一个异步的请求,所以数据请求的同时,可以继续向下执行函数。所以这里值还没有赋值上就开始打印了变量的值。我们在微信小程序开发中,大部分请求都是异步的,而在小程序中并没有给我们直接提供这些异步方法所对应的同步方法,所以如果我们在其它地方使用异步函数处理完的数据的话是没有效果的。青锋建站在这里提出两种解决方法:延时执行或使用promise对象来解决。以下是具体的解决方法。

微信小程序异步请求处理方法

1、setTimeout
  如果你对获取的数据无需在其它地方处理的话可以考虑使用setTimeout方法,但实际上这个时间不容易把控,也可能时间短于getmember异步的时间,仍然获取不到数据,但是一般情况下是没有问题的。
printmember() {
 setTimeout(() => { // 其它地方都不变,在printmember函数中设置setTimeout
 console.log("B方法调用的数据", this.data.info)
 },1000)

}
2、使用promise异步对象
  我们使用promise异步对象将上述函数修改为如下:
getmember() {
   return new promise(function(myResolve, myReject){
   wx.request({
  url: 'http://www.sjzphp.com',
  success: res => {
   this.setData({
    info: res.data.data[0].info
   })
     console.log("A方法请求到的数据",this.data.info) 
  },
       fail:()=>{
           myReject("err");
        }           
   })
   }
}
然后在printmember函数中可以使用
printmember() { 
    this.getmember().then(function(value){
        console.log("B方法调用的数据",this.data.info)
    });
}
  以上是青锋建站给大家分享的微信小程序异步请求接收不到数据的解决方法。青锋建站,提供专业的高品质网站制作服务,包括专业网站建设,SEO,网络营销,软件开发,微信小程序开发,网站建设知名品牌,全国接单,为企业构建强有力的营销平台。

转载请注明来源网址:青锋建站-http://www.sjzphp.com/kaifazhe/xiaochengxu/async_1627.html

电话 15632335515 | 邮箱 943703539@qq.com | QQ 943703539 | 微信 qingfengjianzhan

Copyright © 2016-2026 青锋建站 版权所有