|
導(dǎo)讀微信小程序，簡(jiǎn)稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一... 微信小程序，簡(jiǎn)稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一項(xiàng)門檻非常高的創(chuàng)新，經(jīng)過(guò)將近兩年的發(fā)展，已經(jīng)構(gòu)造了新的小程序開(kāi)發(fā)環(huán)境和開(kāi)發(fā)者生態(tài)。 本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于小程序如何實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求 （詳細(xì)過(guò)程），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
對(duì)于小程序而言，網(wǎng)絡(luò)請(qǐng)求封裝的要比Android強(qiáng)大多了，這一點(diǎn)值得贊揚(yáng)。官方示例： wx.request({
url: 'test.php', //僅為示例，并非真實(shí)的接口地址
data: {
x: '' ,
y: ''
}, header: { 'content-type': 'application/json' // 默認(rèn)值
},
success: function(res) {
console.log(res.data)
}
})but…but…這調(diào)用起來(lái)貌似很簡(jiǎn)單，但是，似乎有點(diǎn)不對(duì)勁？哪兒不對(duì)勁呢——每次調(diào)用的代碼太多了。而且，對(duì)于網(wǎng)絡(luò)請(qǐng)求的日志文件不好管理。這離我們最理想的方式還是有點(diǎn)差距的。 1、代碼簡(jiǎn)潔，一行代碼去搞定。 api.request1(data, function (result) { //數(shù)據(jù)請(qǐng)求成功，
}， function（error）{//失敗
}）那么，基于上面的問(wèn)題。我來(lái)一步步進(jìn)行剖析。 一、網(wǎng)絡(luò)請(qǐng)求的場(chǎng)景分析1、支持token傳入的網(wǎng)絡(luò)請(qǐng)求。這種情況比較少見(jiàn)的。我現(xiàn)在的項(xiàng)目中就遇到了。大概意思是管理員可以操作旗下的其他的虛擬用戶。管理員登錄后生成一個(gè)token，每生成一個(gè)成員時(shí)，會(huì)生成一個(gè)虛擬的virtualToekn，以后每次管理員操作這個(gè)成員時(shí)，都需要用這個(gè)virtualToken，但是管理員獲取自己的信息時(shí)，還是需要用自己的token。這個(gè)時(shí)候就要支持自定義的token傳入了。 2、網(wǎng)絡(luò)請(qǐng)求的劫持。這種場(chǎng)景主要有兩種情況： 1、如果網(wǎng)絡(luò)失敗 解決方法：直接返回失敗，在發(fā)起網(wǎng)絡(luò)請(qǐng)求前結(jié)束本次網(wǎng)絡(luò)請(qǐng)求操作，減少預(yù)知的錯(cuò)誤網(wǎng)絡(luò)訪問(wèn) 3、支持自定義loading窗的彈出和隱藏控制1、loading窗的彈出：這種場(chǎng)景比較多，如下拉刷新列表時(shí)，是不需要loading窗出現(xiàn)的。但是獲取用戶信息是需要loading出現(xiàn)的 4、對(duì)網(wǎng)絡(luò)不同的錯(cuò)誤，進(jìn)行處理二、代碼分析/**
* 自定義token 請(qǐng)求
*
* isShowLoading :true 彈出loading窗
* isEndLoading： true 最后需要隱藏loading窗。若是false，則不隱藏
* token: 可以自定義token。用戶虛擬賬號(hào)使用車輛
*/
export function requestApi(requestData, isShowLoading = true,isEndLoading = true, token = null,onSuccess, onFail) {
let app = getApp().globalData; // 1、檢查是否已經(jīng)登錄，在未登錄的時(shí)候，可以提前緩存一個(gè)臨時(shí)token欺騙本次檢查。等登錄完成后，再更新token值
if (!util.hasLogin()) { return;
} // 2、檢查網(wǎng)絡(luò)狀態(tài)
if (!util.checkNetworkConnected()) { //沒(méi)有網(wǎng)絡(luò)
onFail("網(wǎng)絡(luò)請(qǐng)求失敗，稍后再試") return;
} if (!requestData) {
onFail("數(shù)據(jù)異常，請(qǐng)稍后再試") return;
} let cacheToken = util.takeToken() let newToken = token == null ? cacheToken : token
console.log("newToken===========>", newToken)
requestData.token = newToken
requestData.version = app.version
console.log("==================================================開(kāi)始請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)start========================================")
console.log(requestData)
console.log("==================================================開(kāi)始請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)end===========================================") var baseUrl = app.debug ? app.debugUrl : app.releaseUrl
console.log("===baseUrl===>" + baseUrl) if (isShowLoading){
util.showLoading("加載中")
}
const requestTask = wx.request({
url: baseUrl, data: requestData, header: { 'content-type': 'application/json'
},
method: 'POST',
dataType: 'json',
success: function(res) {
console.log("==================================================返回請(qǐng)求結(jié)果start========================================")
console.log(res.data)
console.log("==================================================返回請(qǐng)求結(jié)果end===========================================")
if (res.data.code == 0) { //成功
// console.log("onSuccess===========>", onSuccess);
onSuccess(res.data)
} else if (res.data.code == 1021) { //未繳納押金
wx.navigateTo({
url: '/pages/recharge/recharge',
}) return false;
} else if (res.data.code == 1006) { //余額不足
wx.navigateTo({
url: '/pages/deposited/deposited',
}) return false;
} else if (res.data.code == 1019) { //未實(shí)名
wx.navigateTo({
url: '/pages/certify/certify',
}) return false;
} else if (res.data.code == 1001) { //token過(guò)期
wx.reLaunch({
url: '/pages/login/login'
}); return false;
} else { //失敗
let error = res.data == null || typeof (res.data) == "undefined" ? "網(wǎng)絡(luò)請(qǐng)求失敗，請(qǐng)稍后再試" : res.data.desc
onFail(error)
console.log("error===========>", error);
}
},
fail: function(res) {
console.log("onFail===========>", res);
onFail("網(wǎng)絡(luò)請(qǐng)求失敗，稍后再試")
},
complete: function(res) {
console.log("complete===========>", isEndLoading);
if (isEndLoading){
wx.hideLoading()
}
}
})
};三、網(wǎng)絡(luò)環(huán)境統(tǒng)一切換。在app.json中統(tǒng)一配置 // 全局的數(shù)據(jù)，可以提供給所有的page頁(yè)面使用
globalData: {
token: "",
version: "version版本號(hào)",
releaseUrl: "正式版url",
debugUrl: "測(cè)試版url", debug: true //true debug環(huán)境，false正式環(huán)境
},這樣，以后切換網(wǎng)絡(luò)環(huán)境只需要修改debug值即可。 四、二次封裝/**
* 自定義loading 框請(qǐng)求
*
* isShowLoading :true 彈出loading窗
* isEndLoading： true 最后需要隱藏loading窗。若是false，則不隱藏
*/
export function request(requestData, isShowLoading = true, isEndLoading = true, onSuccess, onFail){
this.requestApi(requestData, isShowLoading, isEndLoading, null, function (result) {
onSuccess(result)
}, function (error) {
onFail(error)
})
}/**
* 帶有l(wèi)oading 框的 不能自定義的請(qǐng)求
*
*/export function request1(requestData, onSuccess, onFail) { // console.log("onSuccess========request1===>", success, fail);
requestApi(requestData, true, true, null, function (result) {
onSuccess(result)
}, function (error) {
onFail(error)
})
}/**
* 自定義token 請(qǐng)求
*
* isShowLoading :true 彈出loading窗
* isEndLoading： true 最后需要隱藏loading窗。若是false，則不隱藏
* token: 可以自定義token。用戶虛擬賬號(hào)使用車輛
*/export function request2(requestData, isShowLoading = true, isEndLoading = true, token = null, onSuccess, onFail) {
requestApi(requestData, isShowLoading, isEndLoading, token, function (result) {
onSuccess(result)
}, function (error) {
onFail(error)
})
}/**
* 自定義loading 框請(qǐng)求
*
* isShowLoading :true 彈出loading窗
* isEndLoading： true 最后需要隱藏loading窗。若是false，則不隱藏
*/export function request3(requestData, isShowLoading = true, isEndLoading = true, token, onSuccess, onFail) {
requestApi(requestData, isShowLoading, isEndLoading, token, function (result) {
onSuccess(result)
}, function (error) {
onFail(error)
})
}end最后，控制臺(tái)查看日志的示意圖為： 以上就是小程序如何實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求 （詳細(xì)過(guò)程）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！ 小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用。 |
溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個(gè)人學(xué)習(xí)測(cè)試使用，請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請(qǐng)支持購(gòu)買微軟正版軟件！
本站所有資源全部來(lái)自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請(qǐng)及時(shí)通知我們(peng896066052@126.com),我們會(huì)及時(shí)處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
