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

更新時間：2019年05月02日 08:26:45 作者：Acoe

這篇文章主要介紹了微信小程序網絡請求接口封裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

網絡請求封裝實例

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

封裝位置：app.js，方便全局調用
實現(xiàn)方法調用，只用關注接口url和入參
默認和自定義的請求成功、失敗和完成的回調處理
可設置請求失敗自動重新請求的次數
可以防止重復提交
每個請求設定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("發(fā)起網絡請求, 路徑:" + (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("網絡訪問失?。? + 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最外層的接口服務器地址，方便隨時開發(fā)、測試環(huán)境。

這個方法也是必不可少的

 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最外層的常量，用于接口訪問完成后的回調方法來區(qū)分請求的接口是哪個。

請求完成的處理：

/**
  * 接口訪問完成
  * @param {Object} resultCode
  */
 onComplete: function (resultCode) {
  console.log("home onComplete1");

  if (--mCurrentRequestNums <= 0) {
   wx.hideNavigationBarLoading();
  }
 }

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

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

您可能感興趣的文章: