微信小程序开发——使用回调函数出现异常：TypeError: Cannot read property 'setData' of undefined

关键技术点：

作用域问题——回调函数中的作用域已经脱离了调用函数了，因此需要在回调函数外边把this赋给一个新的变量才可以了。

业务需求：

微信小程序开发，业务逻辑需要，需要把获取手机号码的业务逻辑作为检验登录有效性函数的回调函数。

异常描述：

微信小程序开发给data中的变量赋值，出现以下错误：

VM1610:1 thirdScriptError
Cannot read property 'setData' of undefined;at pages/index/index checkSession function;at api request success callback function
TypeError: Cannot read property 'setData' of undefined
    at success (http://127.0.0.1:51323/appservice/pages/index/index.js:116:19)
    at Function.function.a.(anonymous function) (http://127.0.0.1:51323/appservice/__dev__/WAService.js:7:8019)
    at Object.success (http://127.0.0.1:51323/appservice/__dev__/WAService.js:4:13405)
......

详细截图：

异常代码相关源码：

Page({
  data: {
    phone: ""
  },
　　......
  /**
   * 获取用户手机号码
   */
  getPhoneNumber: function(e) {
    //checkSession（callback) 登录有效性验证函数，接收回调函数
    //调用checkSession（callback) ，把getPhoneNumber的业务逻辑作为参数传递给验证函数，以便checkSession（callback)在验证登录有效性之后做出相应的处理
    this.checkSession(function() {
      //用户取消获取手机号码授权
      if (e.detail.errMsg == "getPhoneNumber:fail user deny") return;
      //用户授权获取手机号码
      var sessionKey = wx.getStorageSync("session_key")
      //3. 解密手机号码信息
      var self=this
      wx.request({
        url: 'http://xxxx.xxxxs.com/demo/demo.php',
        data: {
          'encryptedData': e.detail.encryptedData,
          'iv': e.detail.iv,
          'session_key': sessionKey
        },
        method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        header: {
          'content-type': 'application/json'
        }, // 设置请求的 header
        success: function(data2) {
          wx.hideLoading()
          if (data2.statusCode == 200) { 
            //成功获取手机号码              
            if (data2.data.phoneNumber){
              wx.showToast({
                title: data2.data.phoneNumber
              })
              self.setData({    //******出现异常的代码部分********//
                phone: '新消息'
              })      
            }else{
              console.log(data2.data)
            }   
          }
        },
        fail: function(err) {
          console.log(err);
        }
      })
    })
  }
})

异常分析：

js文件中data的确有变量phone,一般来说，是不会出现错误异常的。既然出现了异常，那就应该是这部分代码中有其他的一些代码影响到了。

细细分析这部分代码，除了把获取手机号码的业务逻辑作为 检验登录有效性函数的回调函数之外，其他都是比较常用的代码，所以问题很有可能就是回调函数的问题。

修改代码，在调用sessionCheck()函数之前将this赋给新的变量self:

  /**
   * 获取用户手机号码
   */
  getPhoneNumber: function(e) {
    //checkSession（callback) 登录有效性验证函数，接收回调函数
    //调用checkSession（callback) ，把getPhoneNumber的业务逻辑作为参数传递给验证函数，以便checkSession（callback)在验证登录有效性之后做出相应的处理
    var self = this
    self.checkSession(function() {
　　......

验证结果：

问题解决，代码运行正常！

个人原创博客，转载请注明来源地址：https://www.cnblogs.com/xyyt/p/9584575.html