微信小程式中網路請求的簡單封裝

這篇文章主要介紹了微信小程式之網路請求簡單封裝實例詳解的相關資料,需要的朋友可以參考下

微信小程式之網路請求簡單封裝實例詳解

在微信小程式中實作網路請求相對於Android來說感覺簡單很多，我們只需要使用其提供的API就可以解決網路請求問題。

• 普通HTTPS請求(wx.request)

• #上傳檔案(wx.uploadFile)

• 
  

# #下載檔案(wx.downloadFile)

WebSocket通訊(wx.connectSocket)

為了資料安全，微信小程式網絡請求只支援https，當然各個參數的含義就不在細說，不熟悉的話可以；可以去閱讀官方文檔的網絡請求api，當我們使用request時header的content-typ預設是application/json，在文檔中指出method 的value必須是大寫，不過經過測試，小寫也能要求成功。 request預設的超時時間是60s，如果我們想自訂超時時間，我們可以在app.json中加入下面程式碼片段，分別設定request，socket，和上傳檔案及下載檔案的超時時間。

"networkTimeout": {
  "request": 5000,
  "connectSocket": 5000,
  "uploadFile": 5000,
  "downloadFile": 5000
 }

設定過逾時時間，我們就開始封裝網路請求，平時我們所接觸的網路請求，一般會分為兩類，一類是在後台運行的，沒有載入對話框提示，另一種就是有提示，如提示正在載入數據，那麼我們就以此為線索來進行封裝。先創建一個network的網路請求工具類，然後

// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {
 console.log(params)
  wx.showLoading({
   title: message,
  })
 wx.request({
  url: url,
  data: params,
  header: {
   'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'post',
  success: function (res) {
   //console.log(res.data)
    wx.hideLoading()
   if (res.statusCode == 200) {
    success(res.data)
   } else {
    fail()
   }

  },
  fail: function (res) {
    wx.hideLoading()
    fail()
  },
  complete: function (res) {

  },
 })
}

上面函數很好理解，參數的含義已在程式碼中解釋，在網路請求開始前，先展示Loading對話框，提示使用者目前網路正在請求數據，當網路請求成功或失敗後呼叫wx.hideLoading()取消提示框的展示。在api中也提供了wx.showNavigationBarLoading()用於顯示當前頁面的導航條載入動畫，那麼如果我們想展示這個動畫可以在requestLoading執行開始調用wx.showNavigationBarLoading()，然後在網路請求成功或失敗後調用wx.hideNavigationBarLoading()隱藏導覽列載入動畫。

當網路請求成功且狀態碼為200時，將請求到的資料回呼透過success(res.data)回調給我們的方法，在上面我們沒有對失敗原因進行細分，當然你也可以給失敗回調加個參數，用於提示使用者失敗的原因，如

res.statusCode ==500

時提示伺服器內部錯誤，res.statusCode ==-1時提示請檢查網絡，res. statusCode ==404，找不到位址等等。

然後我們在建立一個不顯示對話框，使用者後台請求資料的請求函數，為了少寫程式碼，我們共用上面的函數，如下

//不显示对话框的请求
function request(url, params, success, fail) {
 this.requestLoading(url, params, "", success, fail)
}

我們看到我們最終還是呼叫的requestLoading，那麼我們可以在該函數作下判斷，如果提示訊息message==''就不顯示對話框。

最終的程式碼

function request(url, params, success, fail) {
 this.requestLoading(url, params, "", success, fail)
}
// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {
 console.log(params)
 wx.showNavigationBarLoading()
 if (message != "") {
  wx.showLoading({
   title: message,
  })
 }
 wx.request({
  url: url,
  data: params,
  header: {
   //'Content-Type': 'application/json'
   'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'post',
  success: function (res) {
   //console.log(res.data)
   wx.hideNavigationBarLoading()
   if (message != "") {
    wx.hideLoading()
   }
   if (res.statusCode == 200) {
    success(res.data)
   } else {
    fail()
   }

  },
  fail: function (res) {
   wx.hideNavigationBarLoading()
   if (message != "") {
    wx.hideLoading()
   }
   fail()
  },
  complete: function (res) {

  },
 })
}
module.exports = {
 request: request,
 requestLoading: requestLoading
}

#使用就很簡單了，如下

//路径根据自己项目路径修改
var network = require("/utils/network.js")
getData:function(){
  network.requestLoading(URL.MY_SCORE, that.data.params, '正在加载数据', function (res) {
  //res就是我们请求接口返回的数据
   console.log(res)
  }, function () {
   wx.showToast({
    title: '加载数据失败',
   })
  })
}

######以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########關於微信小程式解析網頁內容的介紹###############關於微信小程式中框架的解析###############關於微信小程式request介面的封裝介紹########################## #

以上是微信小程式中網路請求的簡單封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！