微信小程序开发笔记之wx.request()的坑——将服务器返回的数据及时显示到视图层

近期开发微信小程序涉及到wx.request()网络请求，原代码为：

// pages/index/home.js
var temp_data ;
Page({

/**
* 页面的初始数据
*/
data: {
items:[]
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 页面初始化后发出新的请求

wx.request({
url: "http://2327.free.ngrok.cc/Note_api/plist",
data: {
"token": getApp().globalData.userInfo.dev_token,
"usertoken": wx.getStorageSync("usertoken")
},
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
success: function(res){

if(res.data.status == 1){
temp_data = res.data.diaryDatas;

}else{
wx.showToast({
title: res.data.message,
icon: "loading",
duration: 2000
})
}
}
})

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
//页面渲染完成
this.setData({
items: temp_data
})

}
})

本想在onLoad()函数中获取数据，在onReady()函数中设置刷新数据 ，结果控制台打印的信息却是 undefined，，


items并没有被赋值，什么原因呢？一开始以为是服务器返回的值不符合json数据格式，后来证明没问题。然后分别打印success()函数中的数据和onReady()函数数据，发现程序先执行了success函数

事实是onLoad函数先执行，之后执行onReady函数，这里可能是由于wx.request(）是多线程网络请求，所以造成了数据不统一，即赋值给items的temp_data是初始值，并没有将服务器返回的数据赋值给他，


后来改为：

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 页面初始化后发出新的请求
var me = this;
wx.request({
url: "http://2327.free.ngrok.cc/Note_api/plist",
data: {
"token": getApp().globalData.userInfo.dev_token,
"usertoken": wx.getStorageSync("usertoken")
},
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
success: function(res){

if(res.data.status == 1){
temp_data = res.data.diaryDatas;
console.log(temp_data);

me.setData({
items: temp_data
})
console.log(me.data.items);
}else{
wx.showToast({
title: res.data.message,
icon: "loading",
duration: 2000
})
}
}
})
},

这里注意的是 ，在success函数中调用this.setdata()函数时，不能直接用this调用，应该是在success函数中this指代意义不同，所以将this赋值给me，用me调用，否则会报如图错误。


这样问题就解决了。