微信小程序（一）onload函数异步执行的解决方案

• 写作目的
• 解决方案一
• 解决方案二

写作目的

这两天把前几个月写的小程序整理了一下，发现实际连上服务器之后会发生网络错误，主要是因为onload里加载了若干个个wx.request函数，有的函数的参数依赖于其他函数的返回值。

而由于微信小程序的onload函数是异步执行的，导致先执行的函数尚未返回参数，后续函数就已经开始运行，最终产生错误。

解决方案一

使用Promise或者回调函数来保证程序按照你想要的顺序执行
sample：getDish()方法需要先执行get_shop_info()方法获取数据

// 使用promise
 getDish:function(e){

　　this.get_shop_info().then(res =>{ //请求成功的时候进行下一步流程，这样就可以避免异步问题

　　　　console.log(res);

　　}).catch(err =>{  //请求失败

　　　　console.log(err);

　　});
}

 get_shop_info:function(e){   //需要先执行的方法

  return new Promise((reslove, reject) => {
    wx.request({   //请求接口的异步操作
      url: ‘’, //接口地址
      method: method || 'GET',
      data:‘’, //参数
      success: (res) => {
          reslove(res.data, res);
      },
      fail: (msg) => {
        reject('请求失败');
      }
    })
  });
}

回调函数虽然也可以解决问题，但由于层级多了以后代码会显得非常混乱，因此不推荐使用。

解决方案二

可以把需要得到的数据从上级页面传回，或写入全局数据/缓存，在新页面执行onload函数时通过setdata获取。

sample：在登录界面向全局写入shop_id信息，在新页面的onload函数中读取

// 新页面的onload函数
>: function (options) {    
    var that = this
    that.setData({
      //注意此处是that.setData而不是this
      shop_id:app.globalData.shop_id,
      
    })
    //写入数据后再执行包含request请求的函数
    this.getType()
    this.getDish()
    this.get_train_info()
    this.get_record_info()
    app.getUserInfo(function (userInfo) {
      that.setData({
        userInfo: userInfo,
        img: userInfo.avatarUrl
      })
    })
    wx.getSystemInfo({
      success: function (res) {
        that.setData({ 
          height: (res.windowHeight*.57)+'px'
        })
      }
    });
  },
  

// 在上层页面写入全局信息
  login: function () {
    var that = this;
    var type = "upload"
    if (this.data.username.length == 0 || this.data.password.length == 0) {
      wx.showToast({
        title: '账号或密码不能为空',
        icon: 'none',
        duration: 2000
      })
    } 
    else {
      wx.request({
        url: 'http://127.0.0.1:5000/login', // 仅为示例，并非真实的接口地址
        method: 'post',
        data: {
          username: this.data.username,
          password: this.data.password
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值
        },
        success(res) {
          if (res.data.flag==1) {
            wx.setStorage({
              key: 'rd_session',
              data: 1
            });
            app.globalData.shop_id = res.data.shop_id
            console.log(app.globalData.shop_id)
            wx.navigateTo({//跳转至下级界面
              url: '/pages/index/index' ,
            })

          } else {
            wx.showToast({
              title: res.data.message,
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
      
      console.log(this.data.logflag)
    }
  }

// 别忘了在app.js里初始化全局数据
globalData: {

    shop_id:0,

  }

comments are welcome！