微信小程序封裝請求方法wx.request(OBJECT)

小程序寫完也一段時間了,最近分享下裝逼的技能吧,封裝請求方法,不但高大上,而且使用簡單。先說說小程序自帶的請求吧!

wx.request(OBJECT)

參數:

參數名 類型 必填 默認值 說明
url String 開發者服務器接口地址
data Object/String/ArrayBuffer 請求的參數
header Object 設置請求的 header,header 中不能設置 Referer。
method String GET 有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType String json 如果設爲json,會嘗試對返回的數據做一次 JSON.parse
responseType String text 設置響應的數據類型。合法值:text、arraybuffer
success Function 收到開發者服務成功返回的回調函數
fail Function 接口調用失敗的回調函數
complete Function 接口調用結束的回調函數(調用成功、失敗都會執行)
wx.request({
  url: 'xxxx.php', 
  data: {
     x: '' ,
     y: ''
  },
  method:"POST",
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

上面的代碼段是維信提供的方法,下面我就說說封裝的方法吧

//  公用請求方法
  netRequest: function ({url, data, success, method = "POST"}) {
xxx
    let server = 'https://xxx.xxxxxxxx.cn';//正式域名
    // let server = 'http://dxxx.xxxxxxxxxx.cn';//測試域名
    // 本地取存儲的 sessionID
    let sessionId = wx.getStorageSync('sid'),
        that      = this;

    if (sessionId != "" && sessionId != null) {
      var header = { 'content-type': 'application/x-www-form-urlencoded', 'Cookie': 'sid=' + sessionId };
    } else {
      var header = { 'content-type': 'application/x-www-form-urlencoded' };
    }
   wx.request({
      url: server + url,
      method: method,
      data: data,
      header: header,
      success: (res) => {
        if (sessionId == "" || sessionId == null) {
          wx.setStorageSync('sid', res.data.info.session_id) //  如果本地沒有就說明第一次請求 把返回的 sessionId 存入本地
        }
        let data = res.data;
        res['statusCode'] === 200 ? success(data) : that.fail();
      },
      fail: function (res) {
        wx.hideLoading();
        wx.showToast({
          title     :   '請求超時',
          icon      :   'loading',
          duration  :   2000
        })
      },
      complete:function(){
        wx.hideLoading();
      }
    });
  }

這裏我要補充下,上面的url就是我把所有的藉口都寫在一個js裏了,所以就是server+url,然後就域名,這個域名分測試域名和正式域名,這樣開發的時候就可以用測試等一切好了沒問題了就可以用正式的,每次只需要註釋就可以了。
這裏寫圖片描述
這個是截圖,下面的是api接口
這裏寫圖片描述
接口是對象,建和值,然後就是應用
這裏寫圖片描述
這裏寫圖片描述
鄙人拙見,如有出入,勞煩指點,謝謝

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章