在微信小程序的開發過程中我們都見過這樣一段代碼
app.js
index.js
這是我們開發一個項目時微信的開發工具自動幫我們生成的部分代碼，當時我就對這段代碼中他說的加入callback防止網絡請請求在Page.onload之後返回就很疑惑：
1、爲什麼網絡請求會在page.onload之後返回，這種情況如果發生了會造成什麼樣的結果？
2、app.js中的userInfoReadyCallback方法是什麼鬼，時微信提供的嗎，app.js中的這個方法是固定的嗎？
在很長的一段時間裏我都是帶着這個疑惑去做項目的，但直到有一天我在另一個地方遇到了一個差不多的問題我才明白了這callback的所有問題。先描述一下我的問題首先我從user數據庫中的取出一個user對象，這個user對象中有一個數組字段chatroom記錄的是用戶加入的所有的羣聊的id。當取出user對象後需要把chatroom中的每一個id對應的chatroom的對象也去出來最後一起放到Page.data中。這個時候問題就出現了當我向data中放完chatroom後卻顯示data中的chatroom仍然是空的。直接看我的問題代碼吧：
Page({
/**
* 頁面的初始數據
*/
data: {
//用戶信息
user: {
userInfo: {},
name: "暫無信息",
phone: "暫無信息",
address: ["暫無信息","暫無信息","暫無信息"],
bookchatroom: []
},
//控制信息
hasUserInfo: false,
canIUse: wx.canIUse("button.open-type.getUserInfo")
},
/**
* 調用雲函數獲取用戶的相關信息
* 然後利用獲取到的信息設置本頁面的data.user的數據
*/
setUser: function (userInfo) {
var self = this
wx.cloud.callFunction({
name: "login",
//向雲函數傳遞的各種參數，系統會在我們傳遞的參數的基礎上自動加上appid以及openid兩個參數
//我們此處查詢用的是openid，不需要額外傳參
data: {},
success: function (res) {
var user = res.result.data[0]
//再次調用雲函數獲取用戶加入的聊天室的相關信息
var bookchatroom = []
for ( var i = 0; i <= user.bookchatroom.length; i ++ ) { //一個一個的獲取chatroom,我當時就是這麼寫的，雖然現在看起來很蠢，但是幸虧我當時這麼寫了，要不我也不會深刻的體會到現在我們所討論的問題
wx.cloud.callFunction ({
name: "getchatroom",
data:{
id: user.bookchatroom[i]
},
success: function (res) {
bookchatroom.push(res.result.data[0])
}
})
}
//把我們從數據庫中獲取的user以及該用戶加入的所有聊天室的信息一起放的page.data中
self.setData({
user: {
userInfo: userInfo,
name: user.name,
phone: user.phone,
address: user.address,
bookchatroom: bookchatroom
}
})
//按照常理來說程序順序執行到此處page.data中的信息應該已經全部放好了，那我們不妨輸出一下看看
console.log(self.data)
//打印完我們會發現page.data.user.bookchatroom的值是null，也就是說此時從數據庫中獲取的bookchatroom的值並沒有成功的注入
}
})
},
爲什麼會出現上邊的情況呢？多番思考後突然想的了開頭使用callback時官方的解釋“// 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之後才返回 // 所以此處加入 callback 以防止這種情況”，這時我們就不難理解這句話了。結合此處我們遇到的問題來看的話是這樣的，在微信小程序中，網絡請求和本地代碼的執行是異步的，當我們發送了網絡請求之後本地並不會等待返回的結果，而是跳過去繼續執行後面的代碼，也就是說在我們從數據庫中請求的bookchatroom返回之前"self.setData({…})"這段代碼就已經執行完了。所以最後打印出來的page.data.user.bookchatroom的內容爲null。
既然已經知道了問題所在我們怎麼解決呢？這個時候請再看官方給的app.js、index.js中的callback代碼應該就會發現解決方法了，就不用再細說了（其實是打了這麼多字不想打了，有需要的的話再細說吧）
當然除了借鑑官方的那個解決方法還有個更舒服、更簡單的方法，但是個人認爲官方的callback解決辦法更加精妙，更加…總之妙不可言