Encapsulation simple des requêtes réseau dans l'applet WeChat

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 : une. Il s'exécute en arrière-plan et il n'y a pas d'invite de boîte de dialogue de chargement. L'autre est qu'il y a une invite, telle que l'invite charge les données, nous l'utilisons alors 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. Dans la requête réseau Avant de commencer, la boîte de dialogue Chargement s'affiche en premier, invitant l'utilisateur que le réseau actuel demande des données. Lorsque la requête réseau réussit ou échoue, appelez wx.hideLoading() pour annuler l'affichage du. boîte de dialogue. 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 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
}

Il est très simple à utiliser, comme suit

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à l'analyse du contenu Web dans les mini-programmes WeChat

À propos de l'analyse des frames dans Mini-programmes WeChat

Introduction à l'encapsulation de l'interface de requête d'applet WeChat

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!