小程序的component组件中回调函数的this指向

小程序的component组件中回调函数的this指向

最近在写小程序的项目，使用原生写的，没有使用任何框架。因为是第一次写小程序，走了一些弯路，就比如在组件component中调用接口，但是接口的this指向问题困扰了我好久，现在整理一下。

• 首先，我是在util文件夹下创建request.js文件，然后通过wx.request封装post请求。代码如下：

var host = 'http:// .........' // 接口地址
// post请求
function postRequest(data, doSuccess, doFail) {
  wx.request({
    url: host,
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
    method: 'POST',
    data: data,
    success: function(res) {
      //参数值为res.data,直接将返回的数据传入
      var data = res.data;
      if (data.errcode === 0) {
        // 成功
        doSuccess(data);
      } else {
        // 失败
        doFail(data)
      }
    },
    fail: function(error) {
      wx.showModal({
	    title: '温馨提示',
	    showCancel: false,
	    content: '未知错误'
	  });
    }
  })
}
module.exports = {
  post: postRequest
}

• 之后在组件中调用接口，有2种解决方法，一种是通过bind改变this指向，一种是通过箭头函数改变this指向

1. 通过bind来改变this指向，bind返回的是一个函数，这个函数可以作为回调函数

var request = require('../../utils/request.js')  // 引入封装好的请求
Component({
	// 生命周期
	lifetimes: {
		ready() {
		var postData = {
			name: 'hhh',
			age: 18
		}
	      console.log(this)
	      request.post(postData, this.doSuccess.bind(this), this.doFail.bind(this))
	    }
	},
	methods: {
		// 接口成功
		doSuccess(data) {
	      console.log('成功事件')
	      console.log(this)
    	},
    	// 接口失败
    	doFail(data) {
	      console.log('失败事件')
	      console.log(this)
    	},
	}
})

2. 还可以通过箭头函数来改变this指向，箭头函数本身是没有this的，因此箭头函数的this是函数所在上下文的this指向。

var request = require('../../utils/request.js')  // 引入封装好的请求
Component({
	lifetimes: {
		request.post( postData, (data) => {
	       console.log('成功事件')
	       console.log(this)
	     },(data) => {
	       console.log('失败事件')
	       console.log(this)
	     })
	}
})

结果输出，生命周期中的this和回调函数中的this指向是同一个：