微信小程序 调用远程接口 给全局数组赋值代码实

微信小程序中调用远程接口给全局数组赋值的代码实例详解

在微信小程序开发中，我们经常需要调用远程接口获取数据并更新页面状态。在这个过程中，有时会遇到“this指向问题”，导致无法正确更新数据。本文将通过一个实例详细介绍如何解决这个问题。

我们先看一段初始的代码，这段代码试图在onLoad生命周期函数中通过wx.request调用远程接口，并将返回的数据赋值给页面的bookList数据属性。

```javascript

Page({

data: {

bookList: []

},

onLoad: function() {

wx.request({

url: '

header: {

'content-type': 'application/json'

},

success: function(res) { // 注意这里应该是success而不是suess

var obj = JSON.parse(res.data);

console.log(obj);

this.setData({ // 这里会出现问题，因为this指向了wx.request的上下文

bookList: obj

});

}

});

}

});

```

这段代码在运行时会报错，提示“Cannot read property 'setData' of null”。这是因为在这个回调函数中，this的指向发生了改变，不再指向页面的实例。为了解决这个问题，我们需要保存正确的this指向，然后在回调中使用。这就需要我们在onLoad函数中定义一个变量（如that）来保存this的指向。

下面是修改后的正确代码：

```javascript

Page({

data: {

bookList: []

},

onLoad: function() {

let that = this; // 保存this的指向

wx.request({

url: '

header: {

'content-type': 'application/json'

},

success: function(res) {

var obj = JSON.parse(res.data);

console.log(obj);

that.setData({ // 使用that来调用setData方法

bookList: obj

});

}

});

}

});

```

在这段修改后的代码中，我们通过在onLoad函数中保存this的指向（使用变量that），然后在回调中使用that来调用setData方法，从而解决了“this指向问题”。这样，我们就可以成功地从远程接口获取数据并更新页面的状态了。希望这个例子能帮助大家更好地理解微信小程序开发中遇到的“this指向问题”，并学会如何解决。