小程序 ajax 加载,小程序实战-小程序网络请求异步加载
最初看到小程序的網絡請求的時候,尤其是演示示例中，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里面的數據。有了上面這樣的試驗之后，我們就很好理解了上面的微信小程序獲取用戶信息的處理了。
舉報/反饋
總結
以上是生活随笔為你收集整理的小程序 ajax 加载,小程序实战-小程序网络请求异步加载的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 页面修饰框架SiteMesh的简单使用
- 下一篇： 2018大学计算机选择题题库,2018年