Beispiel für einen WeChat-Applet-Code zur einfachen Kapselung von Netzwerkanfragen

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erklärung einfacher Kapselungsbeispiele für Netzwerkanfragen in WeChat-Miniprogrammen vorgestellt. Freunde in Not können sich auf

Detaillierte Erklärungen einfacher Kapselungsbeispiele für Netzwerkanfragen beziehen WeChat-Miniprogramme

Die Implementierung von Netzwerkanfragen im WeChat-Applet ist viel einfacher als bei Android. Wir müssen nur die von ihm bereitgestellte API verwenden, um das Netzwerkanfrageproblem zu lösen.

• Normale HTTPS-Anfrage (wx.request)

• Datei hochladen (wx.uploadFile)

• Datei herunterladen (wx.downloadFile)

• WebSocket-Kommunikation (wx.connectSocket)
  

Für Datensicherheit, WeChat-Applet-Netzwerkanfragen Unterstützt nur https. Die Bedeutung der einzelnen Parameter wird natürlich nicht im Detail erläutert. Wenn Sie damit nicht vertraut sind, können Sie die Netzwerkanforderungs-API des offiziellen Dokuments lesen Der Header ist standardmäßig application/json, worauf im Dokument hingewiesen wird. Der Wert der Methode muss in Großbuchstaben angegeben werden, aber nach dem Testen kann die Anforderung auch in Kleinbuchstaben erfolgreich sein. Das Standard-Timeout für Anfragen beträgt 60 Sekunden. Wenn wir das Timeout anpassen möchten, können wir app.json das folgende Code-Snippet hinzufügen, um das Timeout für Anfragen, Sockets und hochgeladene Dateien bzw. heruntergeladene Dateien festzulegen.

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

Nachdem wir das Timeout festgelegt haben, beginnen wir mit der Kapselung der Netzwerkanfragen, mit denen wir normalerweise in Kontakt kommen. Eine davon ist Im Hintergrund gibt es keine Eingabeaufforderung im Ladedialogfeld, und zum anderen gibt es eine Eingabeaufforderung, z. B. das Laden von Daten. Wir verwenden dies als Hinweis zum Kapseln. Erstellen Sie zunächst eine Netzwerkanforderungs-Toolklasse für das Netzwerk und dann

// 展示进度条的网络请求
// 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) {

  },
 })
}

Die Bedeutung der Parameter ist im Code leicht zu verstehen Bevor die Netzwerkanforderung beginnt, wird zunächst das Dialogfeld „Laden“ angezeigt, um den Benutzer darüber zu informieren, dass das aktuelle Netzwerk Daten anfordert. Wenn die Netzwerkanforderung erfolgreich ist oder fehlschlägt, wird wx.hideLoading() aufgerufen, um die Anzeige des Eingabeaufforderungsfelds abzubrechen . Die API stellt auch wx.showNavigationBarLoading() bereit, um die Ladeanimation der Navigationsleiste der aktuellen Seite anzuzeigen. Wenn wir diese Animation anzeigen möchten, können wir wx.showNavigationBarLoading() zu Beginn der requestLoading-Ausführung aufrufen und sie dann aufrufen Die Netzwerkanforderung ist erfolgreich oder schlägt fehl. wx.hideNavigationBarLoading() verbirgt die Ladeanimation der Navigationsleiste.

Wenn die Netzwerkanforderung erfolgreich ist und der Statuscode 200 ist, werden die angeforderten Daten über success(res.data) an unsere Methode zurückgerufen. Wir haben die Gründe für den Fehler oben nicht aufgeschlüsselt Natürlich können Sie dem Fehlerrückruf auch einen Parameter hinzufügen, um den Benutzer nach dem Grund für den Fehler zu fragen. Wenn beispielsweise res.statusCode ==500 einen internen Serverfehler auslöst, wenn res. statusCode ==-1 fordert Sie auf, das Netzwerk zu überprüfen, StatusCode ==404, Adresse nicht gefunden usw.

Dann erstellen wir eine Anforderungsfunktion, die das Dialogfeld nicht anzeigt und Daten vom Benutzerhintergrund anfordert. Um weniger Code zu schreiben, teilen wir die obige Funktion wie folgt:

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

Wir sehen, dass wir am Ende immer noch requestLoading aufrufen, damit wir in dieser Funktion ein Urteil fällen können. Wenn die Meldung =='' angezeigt wird, wird das Dialogfeld nicht angezeigt angezeigt.

Der endgültige Code

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
}

ist wie folgt sehr einfach zu verwenden

//路径根据自己项目路径修改
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: '加载数据失败',
   })
  })
}

Das obige ist der detaillierte Inhalt vonBeispiel für einen WeChat-Applet-Code zur einfachen Kapselung von Netzwerkanfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!