Exemple de code d'applet WeChat pour une encapsulation simple des requêtes réseau

Cet article présente principalement des informations pertinentes sur l'explication détaillée d'exemples d'encapsulation simples de requêtes réseau dans les mini-programmes WeChat. Les amis dans le besoin peuvent se référer à

Explications détaillées d'exemples d'encapsulation simples de requêtes réseau dans. Mini-programmes WeChat

La mise en œuvre des requêtes réseau dans l'applet WeChat est beaucoup plus simple qu'Android. Il suffit d'utiliser l'API fournie par celui-ci pour résoudre le problème des requêtes réseau.

• Demande HTTPS normale (wx.request)

• Télécharger le fichier (wx.uploadFile)

• Télécharger le fichier (wx.downloadFile)

• Communication WebSocket (wx.connectSocket)
  

Pour la sécurité des données, demandes de réseau d'applet WeChat ne prend en charge que https. Bien sûr, la signification de chaque paramètre ne sera pas expliquée en détail. Si vous ne le connaissez pas, vous pouvez lire l'API de requête réseau du document officiel lorsque nous utilisons request, le type de contenu du. l'en-tête est par défaut application/json, ce qui est souligné dans le document. La valeur de la méthode doit être en majuscule, mais après le test, la requête peut également aboutir en minuscules. Le délai d'expiration par défaut pour la demande est de 60 secondes. Si nous souhaitons personnaliser le délai d'expiration, nous pouvons ajouter l'extrait de code suivant à app.json pour définir le délai d'expiration pour la demande, le socket et les fichiers téléchargés et téléchargés respectivement.

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

Après avoir défini le délai d'attente, nous commençons à encapsuler les requêtes réseau avec lesquelles nous entrons habituellement en contact sont généralement divisées en deux catégories. arrière-plan. Lors de l'exécution, il n'y a pas d'invite de boîte de dialogue de chargement, et l'autre est qu'il y a une invite, comme l'invite charge les données, alors nous l'utilisons comme indice pour encapsuler. Créez d'abord une classe d'outils de requête réseau pour le réseau, puis

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

  },
 })
}

La fonction ci-dessus est facile à comprendre. La signification des paramètres a été expliquée dans le code. . Avant le démarrage de la requête réseau, la boîte de dialogue Chargement s'affiche pour indiquer à l'utilisateur que le réseau actuel demande des données. Lorsque la requête réseau réussit ou échoue, wx.hideLoading() est appelé pour annuler l'affichage de la boîte d'invite. . L'API fournit également wx.showNavigationBarLoading() pour afficher l'animation de chargement de la barre de navigation de la page actuelle. Si nous voulons afficher cette animation, nous pouvons appeler wx.showNavigationBarLoading() au début de l'exécution de requestLoading, puis l'appeler après l'exécution de requestLoading. la requête réseau réussit ou échoue. wx.hideNavigationBarLoading() masque l'animation de chargement de la barre de navigation.

Lorsque la requête réseau réussit et que le code d'état est 200, les données demandées seront rappelées à notre méthode via success(res.data). Nous n'avons pas détaillé les raisons de l'échec ci-dessus. Bien sûr, vous pouvez également ajouter un paramètre au rappel d'échec pour demander à l'utilisateur la raison de l'échec. Par exemple, si res.statusCode ==500 provoque une erreur interne du serveur, si res. statusCode ==-1 vous invite à vérifier le réseau, res statusCode ==404, adresse introuvable, etc.

Ensuite, nous créons une fonction de requête qui n'affiche pas la boîte de dialogue et demande des données à l'arrière-plan de l'utilisateur. Afin d'écrire moins de code, nous partageons la fonction ci-dessus, comme suit

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

Nous voyons que nous appelons toujours requestLoading à la fin, nous pouvons donc porter un jugement dans cette fonction. Si le message=='' est demandé, la boîte de dialogue ne le sera pas. affiché.

Le code final

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
}

est très simple à utiliser, comme suit

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!