Einfache Kapselung von Netzwerkanfragen im WeChat-Applet

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
 }

Nach dem Festlegen des Timeouts beginnen wir mit der Kapselung der Netzwerkanfragen, mit denen wir normalerweise in Kontakt kommen. Eine davon ist Bei der Ausführung im Hintergrund gibt es keine Ladedialogfeld-Eingabeaufforderung. Das andere ist, dass es eine Eingabeaufforderung gibt, z. B. die Eingabeaufforderung zum Laden von Daten, die wir dann als Anhaltspunkt für die Kapselung verwenden. Erstellen Sie zuerst 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 obige Funktion ist leicht zu verstehen Bevor die Netzwerkanforderung gestartet wird, wird zunächst das Dialogfeld „Laden“ angezeigt, in dem der Benutzer darüber informiert wird, dass das aktuelle Netzwerk Daten anfordert. Wenn die Netzwerkanforderung erfolgreich ist oder fehlschlägt, rufen Sie wx.hideLoading() auf, 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, sodass wir in dieser Funktion ein Urteil fällen können. Wenn die Eingabeaufforderung message=='' angezeigt wird, wird das Dialogfeld angezeigt wird nicht 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
}

Er ist sehr einfach zu verwenden, wie folgt

//路径根据自己项目路径修改
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 gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in die Analyse von Webinhalten in WeChat-Miniprogrammen

Über die Analyse von Frames in WeChat-Miniprogramme

Einführung in die Kapselung der WeChat-Applet-Anfrageschnittstelle

Das obige ist der detaillierte Inhalt vonEinfache Kapselung von Netzwerkanfragen im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!