最初看到小程序的网络请求的时候,尤其是演示示例中，userInfoReadyCallback这个函数更是一头雾水。其实并不怎么理解.一直很费解.网上各路大侠都有解释，但是就是，不知道是怎么个顺序,而我也是个对程序执行流程很关注的人,现在把我的心得分享给大家.如有理解偏差,还希望各位大侠指教. 以下代码为小程序快速创建项目的代码,里面也有相关的解释,我把一些咱们不用的去掉,重点我们看网络请求这里。
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null,
}
})
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
我们重点看这里index.js 这里的这段
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
这里具体代表着什么呢，首先这只是一个方法的定义，而且，这个方法定义的是全局的再app底下注册的一个新的方法，请注意，这里只是注册了一个方法。 箭头函数=>res 相当于：app.userInfoReadyCallback=function (res){------}
当时我比较疑惑：这个函数定义的res是从哪里来的，如果是服务端传来的数据就算的话，那么如果多个网络请求怎么区分。怎么知道是哪一个对应哪一个的。后来，我反复的思考才想通，其实这里只是个定义，并没有执行。 具体执行是在app.js 这里，大家看到了吗，这里的网络请求是wx.getUserInfo 是小程序api接口函数，他属于异步请求，
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
所以，当这个请求发出之后，还是可以做其他的事情，也就是包括后来的index.js页面的加载等，当index页面加载的时候，会有两种情况，一种已经网络请求成功了(在app.js里面已经绑定了会员数据信息)，这样的话，再index的onload中直接执行第一个if分支即可if (app.globalData.userInfo)，一种是没有成功。那么再index页面加载的时候，就会定义这个全局函数，注意一定要定义为app.函数名，定义了这个函数之后，系统中就有了这个函数定义，那么当app的那个网络请求有反馈结果的时候，就会执行这个函数，把会员的信息绑定到页面上去。这样就会正确同步了数据。
可以这么理解，就是异步加载请求之后，系统还有一个监控，随时监控是否返回了结果。而index页面加载js呢，就是定义系统方法，一旦定义，也就是全局存在了，这都是即时更新的。而那个异步加载请求当有反馈的时候，会判断系统当前的函数定义和状态，一旦符合提交件，立马执行。
关于同步和异步的请求，我们有个很简单的例子可以很好地说明这个问题
同步加载测试返回结果：
$(function () {
$.ajax({url:"您的远程网址",
type:"GET",
data:{},
// async:true,
async:true,
success:function (data)
{
console.log("success");
//alert('我的数据'+data);
$('#resultView').html(data);
},
error:function (err) {
console.log(err);
} });
$('#resultView').html("Ajax同步测试返回结果"); });
// async:true,
async:true,
ajax这个我们经常用到，用于及时获取后端信息，这个默认是异步的，如果加上async:true,才是同步的，同步的概念就是，必须这个执行完了之后，才能执行下面的，如上例所示，如果是同步的，那么最后的结果显示的是：Ajax同步测试返回结果 因为他先顺序执行了上面的那个，如果是异步的，那么再执行ajax请求的同时，还继续页面其他的加载执行，所以先执行了$('#resultView').html("Ajax同步测试返回结果");后来才有执行了success:这个里面的函数，所以肯定是显示了data里面的数据。有了上面这样的试验之后，我们就很好理解了上面的微信小程序获取用户信息的处理了。
举报/反馈