ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序:自定义回调函数(callback)

2020-02-03 14:03:58  阅读:1156  来源: 互联网

标签:function onLoad 自定义 微信 callback res getNameAndCount Page 页面


使用场景

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

/**
   * 生命周期函数--监听页面加载
   * 一个页面只会调用一次
   */
  onl oad: 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之后返回,都会在页面显示我想要的值。
注意:回调函数的使用方式可以根据实际情况灵活变通,此处的例子只是为了解决我自己遇到的问题。且回调函数的命名只要保证前后一致就行。

/**
   * 生命周期函数--监听页面加载
   * 一个页面只会调用一次
   */
  onl oad: function (options) {
    //....
    this.getNameAndCount();
  },
/**
   * 生命周期函数--监听页面显示
   * 每次打开页面都会调用一下
   */
  onShow: function () {
      // 由于 getNameAndCount 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      this.getNameAndCountCallback = res => {
        this.setData({
          // .....
        })
      }
  }
扒鸡撕坦 发布了13 篇原创文章 · 获赞 0 · 访问量 364 私信 关注

标签:function,onLoad,自定义,微信,callback,res,getNameAndCount,Page,页面
来源: https://blog.csdn.net/java13245/article/details/104155302

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有