小程序 ajax 加载,小程序实战-小程序网络请求异步加载
最初看到小程序的網(wǎng)絡(luò)請求的時候,尤其是演示示例中，userInfoReadyCallback這個函數(shù)更是一頭霧水。其實并不怎么理解.一直很費解.網(wǎng)上各路大俠都有解釋，但是就是，不知道是怎么個順序,而我也是個對程序執(zhí)行流程很關(guān)注的人,現(xiàn)在把我的心得分享給大家.如有理解偏差,還希望各位大俠指教. 以下代碼為小程序快速創(chuàng)建項目的代碼,里面也有相關(guān)的解釋,我把一些咱們不用的去掉,重點我們看網(wǎng)絡(luò)請求這里。
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']) {
// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發(fā)送給后臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是網(wǎng)絡(luò)請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null,
}
})
//index.js
//獲取應(yīng)用實例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件處理函數(shù)
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 是網(wǎng)絡(luò)請求，可能會在 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 是網(wǎng)絡(luò)請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
這里具體代表著什么呢，首先這只是一個方法的定義，而且，這個方法定義的是全局的再app底下注冊的一個新的方法，請注意，這里只是注冊了一個方法。 箭頭函數(shù)=>res 相當于：app.userInfoReadyCallback=function (res){------}
當時我比較疑惑：這個函數(shù)定義的res是從哪里來的，如果是服務(wù)端傳來的數(shù)據(jù)就算的話，那么如果多個網(wǎng)絡(luò)請求怎么區(qū)分。怎么知道是哪一個對應(yīng)哪一個的。后來，我反復(fù)的思考才想通，其實這里只是個定義，并沒有執(zhí)行。 具體執(zhí)行是在app.js 這里，大家看到了嗎，這里的網(wǎng)絡(luò)請求是wx.getUserInfo 是小程序api接口函數(shù)，他屬于異步請求，
wx.getUserInfo({
success: res => {
// 可以將 res 發(fā)送給后臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是網(wǎng)絡(luò)請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
所以，當這個請求發(fā)出之后，還是可以做其他的事情，也就是包括后來的index.js頁面的加載等，當index頁面加載的時候，會有兩種情況，一種已經(jīng)網(wǎng)絡(luò)請求成功了(在app.js里面已經(jīng)綁定了會員數(shù)據(jù)信息)，這樣的話，再index的onload中直接執(zhí)行第一個if分支即可if (app.globalData.userInfo)，一種是沒有成功。那么再index頁面加載的時候，就會定義這個全局函數(shù)，注意一定要定義為app.函數(shù)名，定義了這個函數(shù)之后，系統(tǒng)中就有了這個函數(shù)定義，那么當app的那個網(wǎng)絡(luò)請求有反饋結(jié)果的時候，就會執(zhí)行這個函數(shù)，把會員的信息綁定到頁面上去。這樣就會正確同步了數(shù)據(jù)。
可以這么理解，就是異步加載請求之后，系統(tǒng)還有一個監(jiān)控，隨時監(jiān)控是否返回了結(jié)果。而index頁面加載js呢，就是定義系統(tǒng)方法，一旦定義，也就是全局存在了，這都是即時更新的。而那個異步加載請求當有反饋的時候，會判斷系統(tǒng)當前的函數(shù)定義和狀態(tài)，一旦符合提交件，立馬執(zhí)行。
關(guān)于同步和異步的請求，我們有個很簡單的例子可以很好地說明這個問題
同步加載測試返回結(jié)果：
$(function () {
$.ajax({url:"您的遠程網(wǎng)址",
type:"GET",
data:{},
// async:true,
async:true,
success:function (data)
{
console.log("success");
//alert('我的數(shù)據(jù)'+data);
$('#resultView').html(data);
},
error:function (err) {
console.log(err);
} });
$('#resultView').html("Ajax同步測試返回結(jié)果"); });
// async:true,
async:true,
ajax這個我們經(jīng)常用到，用于及時獲取后端信息，這個默認是異步的，如果加上async:true,才是同步的，同步的概念就是，必須這個執(zhí)行完了之后，才能執(zhí)行下面的，如上例所示，如果是同步的，那么最后的結(jié)果顯示的是：Ajax同步測試返回結(jié)果 因為他先順序執(zhí)行了上面的那個，如果是異步的，那么再執(zhí)行ajax請求的同時，還繼續(xù)頁面其他的加載執(zhí)行，所以先執(zhí)行了$('#resultView').html("Ajax同步測試返回結(jié)果");后來才有執(zhí)行了success:這個里面的函數(shù)，所以肯定是顯示了data里面的數(shù)據(jù)。有了上面這樣的試驗之后，我們就很好理解了上面的微信小程序獲取用戶信息的處理了。
舉報/反饋
總結(jié)
以上是生活随笔為你收集整理的小程序 ajax 加载,小程序实战-小程序网络请求异步加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 页面修饰框架SiteMesh的简单使用
- 下一篇： 2018大学计算机选择题题库,2018年