微信小程序 this和that详解及简单实例

微信小程序中的this和that详解及实例教程

在微信小程序开发中，我们经常遇到需要在wx.request({})方法调用成功或失败后获取页面初始化数据data的情况。直接使用this.data可能会导致无法获取数据，调试页面也会报错。这是因为this在JavaScript中代表当前对象，其上下文会随着程序的执行而改变。在wx.request({})方法的回调函数中，对象已经改变，不再是原来的页面对象，因此data属性也不存在。

为了解决这个问题，一种常见的做法是将当前的this对象复制到一个临时变量that中。在回调函数中使用that.data就可以获取到数据了。这样做的好处是确保了回调函数中使用的对象上下文是正确的。

除此之外，还有一种特殊的声明方式可以在回调函数中直接使用this。这种方式是将回调函数作为一个箭头函数（=>）来声明。箭头函数的特点是不创建自己的this上下文，因此可以直接使用外部的this对象。在上述例子中，使用箭头函数可以在回调函数中正确获取到data数据。

让我们来看一个完整的例子：

假设我们在提交表单后需要进行网络请求，并根据返回结果更新页面数据。在这种情况下，我们可以在wx.request的success回调函数中直接使用this来更新数据。如果返回的代码不是0（表示提交失败），我们会更新页面上的加载状态、提示信息和按钮状态。如果代码是0（表示提交成功），我们会更新加载状态并显示一个成功提示。我们还会设置一个定时器来在一段时间后隐藏成功提示并返回上一页。以下是具体的代码示例：

```javascript

success: res => {

if (res.data.code !== 0) {

// 提交失败

this.setData({

loadingHidden: true, // 隐藏加载动画

hiddenTips: false, // 显示提示信息

tipsContent: res.data.message // 设置提示内容

});

} else {

// 提交成功

this.setData({

loadingHidden: true, // 隐藏加载动画

hideCommitSuccessToast: false // 显示成功提示

});

subBtn = false; // 禁用提交按钮

// 设置定时器，3秒后隐藏成功提示并返回上一页

setTimeout(() => {

this.setData({

hideCommitSuccessToast: true // 隐藏成功提示

});

wx.navigateBack({ delta: 2 }); // 返回上一页

}, 2000); // 定时器延时2秒执行

}

}

```希望这份教程能帮助到大家。如果您有任何问题或需要进一步的解释，请随时向我们咨询。感谢您的阅读和支持！如果您觉得这篇教程对您有帮助，请继续关注我们的网站以获取更多有价值的内容！感谢大家的支持和关注！