網(wǎng)絡(luò)請求封裝實(shí)例
實(shí)現(xiàn)定制要求和方便調(diào)用，對微信小程序的網(wǎng)絡(luò)請求接口進(jìn)行了封裝
代碼
直接將這個(gè)方法放在了app.js中
/** * 接口公共訪問方法 * @param {Object} urlPath 訪問路徑 * @param {Object} params 訪問參數(shù)（json格式） * @param {Object} requestCode 訪問碼，返回處理使用 * @param {Object} onSuccess 成功回調(diào) * @param {Object} onErrorBefore 失敗回調(diào) * @param {Object} onComplete 請求完成（不管成功或失敗）回調(diào) * @param {Object} isVerify 是否驗(yàn)證重復(fù)提交 * @param {Object} requestType 請求類型（默認(rèn)POST） * @param {Object} retry 訪問失敗重新請求次數(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ù)提交，相同請求間隔時(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ò)請求, 路徑:" + (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è)置請求的 header success: function (res) { console.log("返回結(jié)果：" + JSON.stringify(res.data)); if (res.data) { if (res.data.statusCode == 200) { //訪問成功 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 ? "請求失敗 , 請重試" : res.data.message, requestCode); } } else { onErrorBefore(0, "請求失敗 , 請重試", requestCode); } }, fail: function (res) { retry--; console.log("網(wǎng)絡(luò)訪問失敗：" + JSON.stringify(res)); if (retry > 0) return that.webCall(urlPath, params, requestCode, onSuccess, onErrorBefore, onComplete, requestType, retry); }, complete: function (res) { onComplete(requestCode); //請求完成后，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ā)、測試環(huán)境。
這個(gè)方法也是必不可少的
complete: function (res) { onComplete(requestCode); //請求完成后，2秒后重復(fù)驗(yàn)證的開關(guān)關(guān)閉 if (isVerify) { setTimeout(function () { that.verifyCount[urlPath] = false; }, 2000); } } })調(diào)用示范
請求：
// 請求 home banner 數(shù)據(jù) wx.showNavigationBarLoading(); app.webCall("/app/homeBanner", {}, QUERY_BANNER, this.onSuccess, this.onErrorBefore, this.onComplete);請求成功的回調(diào)處理：
/** * 接口訪問成功返回 * @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最外層的常量，用于接口訪問完成后的回調(diào)方法來區(qū)分請求的接口是哪個(gè)。
請求完成的處理：
/** * 接口訪問完成 * @param {Object} resultCode */ onComplete: function (resultCode) { console.log("home onComplete1"); if (--mCurrentRequestNums <= 0) { wx.hideNavigationBarLoading(); } }mCurrentRequestNums 是放在js最外層的變量，表示發(fā)起請求的數(shù)量，用于多個(gè)接口同時(shí)被調(diào)用，并希望在全部請求結(jié)束后關(guān)閉標(biāo)題欄加載動(dòng)畫時(shí)用。
以上所述是小編給大家介紹的微信小程序網(wǎng)絡(luò)請求接口封裝詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對VEVB武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
