wx原生小程序代码中为什么经常出现_this

小程序里大量异步 API早年写法全是普通function回调wx.request、wx.showModal、wx.chooseImage、Promise 的.then(function(){})等。onLoad() { wx.request({ url: xxx, success: function(res) { // 这里 this 不再是页面实例 this.setData({ list: res.data }) // Uncaught TypeError: this.setData is not a function } }) }普通function(){}会重新绑定上下文回调里的this是空 /undefined拿不到页面的setData、data、页面方法。常用解决方法是提前缓存外层页面 thisonLoad() { let _this this; // 把页面实例存到变量 wx.request({ url: xxx, success: function(res) { _this.setData({ list: res.data }) // 稳定可用 } }) }以上是ES5写法有了ES6的async/await之后就不存在这种问题。不多层嵌套不套.then()ES6之后有了箭头函数以及async/await可以这么写不再嵌套函数防止回调地狱。箭头函数示例Page({ data: { list: [] }, onLoad() { // 无需 let _this this wx.request({ url: https://xxx/api/list, // 箭头函数this 继承外层页面实例 success: (res) { this.setData({ list: res.data.data }); }, fail: (err) { wx.showToast({ icon: none, title: 请求失败 }); } }) } })多层嵌套不使用async/await时箭头函数版onPayMent() { this.setData({ isMask: true }); wx.showLoading(); // 第一层then 箭头函数 this.GetWxPayOrderByMiniPro(this.data.orderId).then((res) { // 内层第二层then 依然箭头直接this this.WxPay(res).then((payRes) { ... }).catch((err) { ... }) }).catch((err) { wx.hideLoading(); this.setData({ isMask: false }); }) }async/await版示例// 封装请求 function http(url) { return new Promise((resolve, reject) { wx.request({ url, success: resolve, fail: reject }) }) } Page({ data: { list: [] }, // 函数加 async 标识 async onLoad() { try { // await 等待接口执行完成 const res await http(https://xxx/api/list); this.setData({ list: res.data.data }); } catch (err) { wx.showToast({ icon: none, title: 请求出错 }); } } })