小程序处理异步问题

要处理异步问题，首先我们得知道什么是异步，异步就是在A方法中请求，在B方法中调用，如果我们直接在B方法中调用，是获取不到数据的，所以我们需要对异步方法进行处理，而在微信小程序开发中，大部分请求都是异步的，而在小程序中并没有给我们直接提供这些异步方法所对应的同步方法，所以如果我们在其它地方使用异步函数处理完的数据的话是没有效果的，如下：

  data: {
    brandimg: ''  // 设置一个空变量，在请求数据后将请求结果赋值给该变量
  },
 
  getImgUrl() {  // 把获取数据的函数简称为A函数
    wx.request({
      url: 'http://daxun.kuboy.top/api/pro',
      success: res => {
        this.setData({
          brandimg: res.data.data[0].brandimg // 将获取到的数据赋值给data中的变量
        })
        console.log("A方法请求到的数据",this.data.brandimg)  // 在此将赋值的结果输出
      }
    })
  },
 
  useImage() { // 把使用数据的函数简称为B函数
    console.log("B方法调用的数据",this.data.brandimg)
  },
 
  onLoad: function () {
    this.getImgUrl()  // 在页面加载时执行获取数据的函数
    this.useImage()    // 检测是否能正确输出数据
  },

打印出的结果如下：

由此可见我们已经成功获取到了数据，但是并不能在B函数调用数据，

这时候我们就需要通过其他的方法来解决异步问题，在js中，我们有许多处理异步问题的解决方案，如回调函数，async-await，Generator-yield，Promise等，但是在小程序中，并不能直接使用async-await，或者是Generator-yield方法，所以这时候我们可以采用以下几种方式处理：

1、setTimeout
如果你对获取的数据无需在其它地方处理的话可以考虑使用setTimeout方法。

代码如下：

 useImage() {
    setTimeout(() => {  // 其它地方都不变，在B函数中设置setTimeout
      console.log("B方法调用的数据", this.data.brandimg)
    },1000)
  },

2、Promise
在小程序中可以直接使用promise，我们需要做的就是在A函数中返回一个promise，在返回的promise中再进行获取数据的操作，把成功获取到的数据传入resolve中，把失败的结果传入reject，然后在B函数中调用A函数，调用后再使用.then 和 .catch 分别对成功和失败的结果进行处理

代码如下：

  data: {
    brandimg: ''  // 设置一个空变量，在请求数据后将请求结果赋值给该变量
  },
 
  getImgUrl() {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'http://daxun.kuboy.top/api/pro',
        success: res => {
          this.setData({
            brandimg: res.data.data[0].brandimg // 将获取到的数据赋值给data中的变量
          })
          resolve(res)
          console.log("A方法请求到的数据", this.data.brandimg)  // 在此将赋值的结果输出
        },
        fail: res => {
          reject(res)
        }
      })
    })
  },
 
  useImage() {
    this.getImgUrl().then(res => {
      console.log("B方法中得到的数据",res)
    }).catch(res =>{
      console.log(res)
    }) 
  },
 
  onLoad: function () {
    this.useImage()   
  },

小程序处理异步问题

猜你喜欢