麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

詳解微信小程序網絡請求接口封裝實例

2020-03-21 15:58:19
字體:
來源:轉載
供稿:網友

網絡請求封裝實例

實現定制要求和方便調用,對微信小程序的網絡請求接口進行了封裝

  1. 封裝位置:app.js,方便全局調用
  2. 實現方法調用,只用關注接口url和入參
  3. 默認和自定義的請求成功、失敗和完成的回調處理
  4. 可設置請求失敗自動重新請求的次數
  5. 可以防止重復提交
  6. 每個請求設定requestCode

代碼

直接將這個方法放在了app.js中

/**  * 接口公共訪問方法  * @param {Object} urlPath 訪問路徑  * @param {Object} params 訪問參數(json格式)  * @param {Object} requestCode 訪問碼,返回處理使用  * @param {Object} onSuccess 成功回調  * @param {Object} onErrorBefore 失敗回調  * @param {Object} onComplete 請求完成(不管成功或失?。┗卣{  * @param {Object} isVerify 是否驗證重復提交  * @param {Object} requestType 請求類型(默認POST)  * @param {Object} retry 訪問失敗重新請求次數(默認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;  //防止重復提交,相同請求間隔時間不能小于500毫秒  var nowTime = new Date().getTime();  if (this.requestCount[urlPath] && (nowTime - this.requestCount[urlPath]) < 500) {   return;  }  this.requestCount[urlPath] = nowTime;  //是否驗證重復提交  if (isVerify) {   if (this.verifyCount[urlPath]) {    return;   }   this.verifyCount[urlPath] = true; //重復驗證開關開啟  }  console.log("發起網絡請求, 路徑:" + (that.apiHost + urlPath) + ", 參數:" + 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'   }, // 設置請求的 header   success: function (res) {    console.log("返回結果:" + 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("網絡訪問失?。?quot; + JSON.stringify(res));    if (retry > 0) return that.webCall(urlPath, params, requestCode, onSuccess, onErrorBefore, onComplete, requestType, retry);   },   complete: function (res) {    onComplete(requestCode);    //請求完成后,2秒后重復驗證的開關關閉    if (isVerify) {     setTimeout(function () {      that.verifyCount[urlPath] = false;     }, 2000);    }   }  }) }

上面的verifyCount是放在data中的數組,apiHost 是放在js最外層的接口服務器地址,方便隨時開發、測試環境。

這個方法也是必不可少的

 complete: function (res) {    onComplete(requestCode);    //請求完成后,2秒后重復驗證的開關關閉    if (isVerify) {     setTimeout(function () {      that.verifyCount[urlPath] = false;     }, 2000);    }   }  })

調用示范

請求:

 // 請求 home banner 數據  wx.showNavigationBarLoading();  app.webCall("/app/homeBanner", {}, QUERY_BANNER, this.onSuccess, this.onErrorBefore, this.onComplete);

請求成功的回調處理:

 /**  * 接口訪問成功返回  * @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最外層的常量,用于接口訪問完成后的回調方法來區分請求的接口是哪個。

請求完成的處理:

/**  * 接口訪問完成  * @param {Object} resultCode  */ onComplete: function (resultCode) {  console.log("home onComplete1");  if (--mCurrentRequestNums <= 0) {   wx.hideNavigationBarLoading();  } }

mCurrentRequestNums 是放在js最外層的變量,表示發起請求的數量,用于多個接口同時被調用,并希望在全部請求結束后關閉標題欄加載動畫時用。

以上所述是小編給大家介紹的微信小程序網絡請求接口封裝詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持!


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 极品xxxx欧美一区二区 | 亚洲一区免费观看 | 日韩剧情片 | 综合精品| 91精品免费在线 | 调教小男生抽打尿孔嗯啊视频 | 黑人一级片视频 | 久久精品二区 | 国产亚洲精品久久久久婷婷瑜伽 | 久久精品国产99国产精品澳门 | 日本在线观看视频网站 | 全黄裸片武则天一级第4季 九色p | 国产一区二区精品在线观看 | 黄色网址你懂的 | 九九热精品在线 | 视频h在线| 中文字幕一区2区 | 国产在线1区 | 91情侣在线偷精品国产 | 午夜久久久精品一区二区三区 | 最新中文字幕免费视频 | 美女毛片在线观看 | 日本高清黄色片 | 蜜桃视频在线免费播放 | 成人在线视频免费 | 毛片一区二区三区四区 | 久久亚洲美女视频 | 极品一级片 | 亚洲国产中文字幕 | 末成年女av片一区二区 | 91精品视频网址 | 免费一级在线观看 | 久久网国产| 美女黄色毛片免费看 | 免费毛片小视频 | 精品999www | 欧美成人黄色小视频 | 黄色小视频免费在线观看 | 久久2019中文字幕 | 色97在线| 国产1区2区3区在线观看 |