微信小程序：自定义回调函数（callback）

使用场景

自定义了一个方法getNameAndCount()，用于向后台发送请求，获取数据库里的一些数据在页面打开的时候就显示在页面上。

/**
   * 生命周期函数--监听页面加载
   * 一个页面只会调用一次
   */
  onLoad: function (options) {
    this.data.openid = app.globalData.openid
    this.data.requestUrl = app.globalData.requestUrl
    // 获取所有调味品和菜品的数量
    this.getNameAndCount();
  },

如上所示，由于onLoad()是生命周期函数，在页面加载的时候就会执行，在Page.onLoad()中调用getNameAndCount()就会使得页面显示的时候已经获取到了想要的值。
但由于 getNameAndCount() 是网络请求，可能会在 Page.onLoad 之后才返回，出现页面显示值为空的情况（实际上已经从后台获取到了值）。

解决方法

如下所示，就需要在getNameAndCount()中自定义一个回调函数（getNameAndCount()）。

getNameAndCount: function(){
    // ...
    wx.request({
     // ...
     // 请求成功
      success: function (res) {
      // ...
        // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
        // 所以此处加入 callback 以防止这种情况
        if (this.getNameAndCountCallback) {
          this.getNameAndCountCallback(res)
        }
      },
      fail: function (res) {
        console.log(res)
      }
    })

getNameAndCount()的使用

在onShow()中会获取getNameAndCount()请求成功返回的值，所以将getNameAndCountCallback()的调用写在onShow()中，这样无论getNameAndCount()是不是在Page.onLoad之后返回，都会在页面显示我想要的值。
注意：回调函数的使用方式可以根据实际情况灵活变通，此处的例子只是为了解决我自己遇到的问题。且回调函数的命名只要保证前后一致就行。

/**
   * 生命周期函数--监听页面加载
   * 一个页面只会调用一次
   */
  onLoad: function (options) {
    //....
    this.getNameAndCount();
  },

/**
   * 生命周期函数--监听页面显示
   * 每次打开页面都会调用一下
   */
  onShow: function () {
      // 由于 getNameAndCount 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      this.getNameAndCountCallback = res => {
        this.setData({
          // .....
        })
      }
  }