建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)怎么在微信小程序中對(duì)網(wǎng)絡(luò)請(qǐng)求接口進(jìn)行封裝，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
德州ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！
網(wǎng)絡(luò)請(qǐng)求封裝實(shí)例
實(shí)現(xiàn)定制要求和方便調(diào)用，對(duì)微信小程序的網(wǎng)絡(luò)請(qǐng)求接口進(jìn)行了封裝
封裝位置：app.js，方便全局調(diào)用
實(shí)現(xiàn)方法調(diào)用，只用關(guān)注接口url和入?yún)?/p>
默認(rèn)和自定義的請(qǐng)求成功、失敗和完成的回調(diào)處理
可設(shè)置請(qǐng)求失敗自動(dòng)重新請(qǐng)求的次數(shù)
可以防止重復(fù)提交
每個(gè)請(qǐng)求設(shè)定requestCode
代碼
直接將這個(gè)方法放在了app.js中
/**
* 接口公共訪問(wèn)方法
* @param {Object} urlPath 訪問(wèn)路徑
* @param {Object} params 訪問(wèn)參數(shù)（json格式）
* @param {Object} requestCode 訪問(wèn)碼，返回處理使用
* @param {Object} onSuccess 成功回調(diào)
* @param {Object} onErrorBefore 失敗回調(diào)
* @param {Object} onComplete 請(qǐng)求完成（不管成功或失敗）回調(diào)
* @param {Object} isVerify 是否驗(yàn)證重復(fù)提交
* @param {Object} requestType 請(qǐng)求類型（默認(rèn)POST）
* @param {Object} retry 訪問(wèn)失敗重新請(qǐng)求次數(shù)（默認(rèn)1次）
*/
webCall: function (urlPath, params, requestCode, onSuccess, onErrorBefore, onComplete, isVerify, requestType, retry) {
var params = arguments[1] ? arguments[1] : {};
//var requestCode = arguments[2] ? arguments[2] : 1;
var onSuccess = arguments[3] ? arguments[3] : function () { };
var onErrorBefore = arguments[4] ? arguments[4] : this.onError;
var onComplete = arguments[5] ? arguments[5] : this.onComplete;
var isVerify = arguments[6] ? arguments[6] : false;
var requestType = arguments[7] ? arguments[7] : "POST";
var retry = arguments[8] ? arguments[8] : 1;
var that = this;
//防止重復(fù)提交，相同請(qǐng)求間隔時(shí)間不能小于500毫秒
var nowTime = new Date().getTime();
if (this.requestCount[urlPath] && (nowTime - this.requestCount[urlPath]) < 500) {
return;
}
this.requestCount[urlPath] = nowTime;
//是否驗(yàn)證重復(fù)提交
if (isVerify) {
if (this.verifyCount[urlPath]) {
return;
}
this.verifyCount[urlPath] = true; //重復(fù)驗(yàn)證開關(guān)開啟
}
console.log("發(fā)起網(wǎng)絡(luò)請(qǐng)求, 路徑:" + (that.apiHost + urlPath) + ", 參數(shù):" + JSON.stringify(params));
wx.request({
url: that.apiHost + urlPath,
data: params,
method: requestType, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': requestType == 'POST' ?
'application/x-www-form-urlencoded' : 'application/json'
}, // 設(shè)置請(qǐng)求的 header
success: function (res) {
console.log("返回結(jié)果：" + JSON.stringify(res.data));
if (res.data) {
if (res.data.statusCode == 200) { //訪問(wèn)成功
onSuccess(res.data, requestCode);
} else if (res.data.statusCode == 300000001) { // 未登錄
that.isLogin = false;
onErrorBefore(0, res.data.message, requestCode);
} else {
onErrorBefore(0, res.data.message == null ? "請(qǐng)求失敗 , 請(qǐng)重試" : res.data.message, requestCode);
}
} else {
onErrorBefore(0, "請(qǐng)求失敗 , 請(qǐng)重試", requestCode);
}
},
fail: function (res) {
retry--;
console.log("網(wǎng)絡(luò)訪問(wèn)失敗：" + JSON.stringify(res));
if (retry > 0) return that.webCall(urlPath, params, requestCode, onSuccess, onErrorBefore, onComplete, requestType, retry);
},
complete: function (res) {
onComplete(requestCode);
//請(qǐng)求完成后，2秒后重復(fù)驗(yàn)證的開關(guān)關(guān)閉
if (isVerify) {
setTimeout(function () {
that.verifyCount[urlPath] = false;
}, 2000);
}
}
})
}上面的verifyCount是放在data中的數(shù)組，apiHost 是放在js最外層的接口服務(wù)器地址，方便隨時(shí)開發(fā)、測(cè)試環(huán)境。
這個(gè)方法也是必不可少的
complete: function (res) {
onComplete(requestCode);
//請(qǐng)求完成后，2秒后重復(fù)驗(yàn)證的開關(guān)關(guān)閉
if (isVerify) {
setTimeout(function () {
that.verifyCount[urlPath] = false;
}, 2000);
}
}
})調(diào)用示范
請(qǐng)求：
// 請(qǐng)求 home banner 數(shù)據(jù)
wx.showNavigationBarLoading();
app.webCall("/app/homeBanner", {}, QUERY_BANNER, this.onSuccess, this.onErrorBefore, this.onComplete);請(qǐng)求成功的回調(diào)處理：
/**
* 接口訪問(wèn)成功返回
* @param {Object} data
* @param {Object} requestCode
*/
onSuccess: function (data, requestCode) {
var that = this;
switch (requestCode) {
case QUERY_BANNER:
that.setData({ bannerData: (data ? data.data : []) });
break;
}QUERY_BANNER是放在js最外層的常量，用于接口訪問(wèn)完成后的回調(diào)方法來(lái)區(qū)分請(qǐng)求的接口是哪個(gè)。
請(qǐng)求完成的處理：
/**
* 接口訪問(wèn)完成
* @param {Object} resultCode
*/
onComplete: function (resultCode) {
console.log("home onComplete1");
if (--mCurrentRequestNums <= 0) {
wx.hideNavigationBarLoading();
}
}mCurrentRequestNums 是放在js最外層的變量，表示發(fā)起請(qǐng)求的數(shù)量，用于多個(gè)接口同時(shí)被調(diào)用，并希望在全部請(qǐng)求結(jié)束后關(guān)閉標(biāo)題欄加載動(dòng)畫時(shí)用。
關(guān)于怎么在微信小程序中對(duì)網(wǎng)絡(luò)請(qǐng)求接口進(jìn)行封裝就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
當(dāng)前文章：怎么在微信小程序中對(duì)網(wǎng)絡(luò)請(qǐng)求接口進(jìn)行封裝
文章分享：http://www.ef60e0e.cn/article/jppcjj.html
