微信小程序 wx.request 网络请求默认为异步，js 文件内 wx.request 发出请求后，主程序流程将继续向下执行，此时 wxml 页面若有服务器返回的数据绑定，将输出一个空白。当异步请求完毕数据返回后，wxml 页面已经渲染完毕，返回的数据不会显示在页面。

还有一种情况，在以 tabBar 结构的小程序里，第一个页面执行 wx.request 数据请求，在外部数据返回页面前，用户快速切换到了其它 tabBar 页面，此时容易造成第一个页面数据返回中断。

解决方法： 定义回调函数

回调函数的运行逻辑是这样的，有 A → B 两个按顺序运行的过程，A 过程中执行异步数据请求（数据还没返回可能 B 已经运行结束），然后在 B 过程中定义一个 A.callback 函数，当过程 A 返回数据后就判断 this.callback 是否被定义。如果被定义了，就说明 B 正需要这个数据，别犹豫了赶紧执行吧。如果过程 A 中没发现 this.callback 被定义，说明数据返回的太快了，B 还没需要呢，于是 A 把返回的数据存入手机缓存或全局变量里，等 B 需要的时候自己取吧。而 B 因为数据已经获取，就无需再定义 A.callback 函数，当然即使定义了 A 也不会执行，因为 A 已经运行结束。

示例代码

用小程序开发工具默认的代码，优化后示例如下：

app.js 文件

//app.js
App({onLaunch: function () {// 获取用户头像和昵称信息，需要用户授权wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {// 此处更新全局变量，但 index.onLoad 可能已经执行完毕this.gbData.userInfo = res.userInfo;// 由于 getUserInfo 是网络请求，可能会在 index.onLoad 完成之后返回// 所以此处判断回调函数是否被 index.onLoad 定义，如果定义则执行之if (this.userInfoCallback) {this.userInfoCallback(res);}}})}}})},gbData: {userInfo: null // 存储用户的头像路径和昵称信息的全局变量}
})

index.js 文件

//index.js
const app = getApp();
Page({data: {motto: '欢迎登录',userInfo: {},hasUserInfo: false //如果用户未授权，则不能获取用户信息},onLoad: function () {// 由于 app.js 中的 getUserInfo 是异步网络请求， 全局变量 userInfo// 可能没有被请求的数据填充，所以必须在 else 中给 app 定义一个回调函数if (app.gbData.userInfo) {this.setData({userInfo: app.gbData.userInfo,hasUserInfo: true});} else {// 给 app 定义回调函数并在 app 中执行，接收 res 参数进行页面数据渲染app.userInfoCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true});}}},// 用户点击授权时响应函数，进行全局变量更新及页面数据渲染f0(e) {console.log(e);app.gbData.userInfo = e.detail.userInfo;this.setData({userInfo: app.gbData.userInfo,hasUserInfo: true});}
})

index.wxml 文件

<!--index.wxml-->
<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo}}" open-type="getUserInfo" bindgetuserinfo="f0">获取头像昵称</button><block wx:else><image class="avatar" src="{{userInfo.avatarUrl}}"></image><text>{{userInfo.nickName}}</text></block></view><view>{{motto}}</view>
</view>

index.css 文件

/**index.wxss**/
.container, .userinfo {display: flex;flex-direction: column;align-items: center;
}.container {height: 100vh;justify-content: space-around;
}.avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}