Le processus de mise en œuvre du traitement des processus asynchrones par Promise dans l'applet WeChat

Cet article présente principalement des informations pertinentes sur les exemples détaillés d'utilisation de Promise pour le traitement de processus asynchrones dans les mini-programmes WeChat. Voici une explication détaillée de la façon d'utiliser Promise pour traiter des processus asynchrones et fournit des étapes de mise en œuvre spécifiques. Suivant

Une explication détaillée d'un exemple d'utilisation de Promise pour le traitement de processus asynchrone dans une applet WeChat

Nous savons que JavaScript est exécuté en un seul processus, et les opérations synchrones affecteront l'exécution du traitement de blocage. Par exemple, dans un programme de page de navigateur, si un morceau de code synchronisé prend beaucoup de temps à s'exécuter (comme une opération en boucle importante), la page restera bloquée.

Ainsi, en JavaScript, certaines fonctionnalités asynchrones sont fournies pour offrir des avantages en termes de performances et d'expérience au programme. Par exemple, le code peut être exécuté dans setTimeout(); demande de données asynchrone au serveur. Ces codes asynchrones ne bloqueront pas le processus principal de l'interface actuelle et l'interface peut toujours fonctionner de manière flexible. Le traitement correspondant sera effectué une fois l'exécution du code asynchrone terminée.

Un code asynchrone typique ressemble à ceci :

function asyncFunc(callback) {
 setTimeout(function () {
  //在这里写你的逻辑代码
  //...

  //逻辑代码结束，执行一个回调函数
  callback();
 }, 5000);
}

ou :

function getAccountInfo(callback, errorCallback) {
 wx.request({
  url: '/accounts/12345',
  success: function (res) {
   //...
   callback(data);
  },
  fail: function (res) {
   //...
   errorCallback(data);
  }
 });
}

Ensuite, nous l'appelons ainsi :

asyncFunc(function () {
 console.log("asyncFunc() run complete");
});

getAccountInfo(function (data) {
 console.log("get account info successfully:", data);
}, function () {
 console.error("get account info failed");
});

C'est une façon d'utiliser les fonctions de rappel pour contrôler le flux d'exécution du code. Cela semble bien et facile à comprendre.

Cependant, si nous avons trop d'opérations asynchrones dans un morceau de code et que nous devons nous assurer que ces opérations asynchrones sont exécutées dans l'ordre, alors notre code aura l'air très mauvais, comme ceci :

asyncFunc1(function(){
 //...
 asyncFunc2(function(){
  //...
  asyncFunc3(function(){
   //...
   asyncFunc4(function(){
    //...
    asyncFunc5(function(){
      //...
    });   });
  });
 });
});

La lisibilité et la maintenabilité d'un tel code peuvent être imaginées. De plus, le vrai problème avec la fonction de rappel est :

Elle nous enlève la possibilité d'utiliser les mots-clés return et throw.

Alors, quels sont les moyens d'améliorer ce problème ? La réponse est oui, l’émergence du concept de Promesse résout bien tout cela. Concernant ce qu'est Promise, il y a beaucoup d'introductions après recherche, je ne vais pas copier-coller ici, je parlerai principalement de la façon dont nous l'utilisons pour résoudre nos problèmes.

Jetons un coup d'oeil, à quoi ressemblerait l'exemple ci-dessus si nous utilisions Promise ? Changeons d'abord ces fonctions en Promise :

function asyncFunc1(){
 return new Promise(function (resolve, reject) {
  //...
 })
}

 
// asyncFunc2,3,4,5也实现成跟asyncFunc1一样的方式...

Jetons ensuite un œil à leur fonctionnement appelé comme ceci :

asyncFunc1()
 .then(asyncFunc2)
 .then(asyncFunc3)
 .then(asyncFunc4)
 .then(asyncFunc5);

De cette façon, ces fonctions asynchrones seront exécutées une par une dans l'ordre.

ES6 prend en charge Promise de manière native, mais dans les environnements où Promise n'est pas pris en charge de manière native, nous disposons de nombreuses bibliothèques tierces pour le prendre en charge, telles que Q.js et Bluebird. En plus des API Promise standards, elles fournissent généralement des API non standards mais très utiles, rendant le contrôle des processus asynchrones plus élégant.

D'après la documentation API de l'applet WeChat, nous pouvons voir que de nombreuses fonctions de l'API JavaScript fournies par le framework sont en réalité asynchrones, comme wx.setStorage(), wx.getStorage(), wx.getLocation ( ), etc., ce sont également les méthodes de traitement de rappel fournies. En transmettant les fonctions de rappel de réussite, d'échec et complètes dans les paramètres, le succès ou l'échec de l'opération peut être traité séparément.

Par exemple :

wx.getLocation({ 
 type: 'wgs84', 
 success: function(res) { 
  var latitude = res.latitude 
  var longitude = res.longitude 
  var speed = res.speed 
  var accuracy = res.accuracy 
 },
 fail: function() {
  console.error("get location failed")
 }
})

Pouvons-nous faire en sorte que l'API asynchrone de l'applet WeChat prenne en charge la promesse ? La réponse est oui, bien sûr, nous pouvons utiliser Promise pour encapsuler ces API une par une, mais cela reste assez gênant. Cependant, étant donné que le format des paramètres de l'API du mini-programme est relativement uniforme, il n'accepte qu'un seul paramètre d'objet et les rappels sont définis dans ce paramètre. Par conséquent, cela facilite notre traitement unifié et nous pouvons écrire un non-. outil intrusif. Méthode pour effectuer un tel travail :

Supposons que nous écrivions cette méthode outil dans un fichier nommé util.js :

var Promise = require('../libs/bluebird.min')  //我用了bluebird.js
function wxPromisify(fn) { 
 return function (obj = {}) {  
  return new Promise((resolve, reject) => {   
   obj.success = function (res) {    
    resolve(res)   
   }   

   obj.fail = function (res) {    
    reject(res)   
   }   

   fn(obj)  
  }) 
 }
}

module.exports = { 
 wxPromisify: wxPromisify
}

Après cela, voyons comment l'utiliser. Cette méthode transforme l'API de rappel d'origine en une méthode Promise :

var util = require('../utils/util')

var getLocationPromisified = util.wxPromisify(wx.getLocation)

getLocationPromisified({
 type: 'wgs84'
}).then(function (res) {
 var latitude = res.latitude 
 var longitude = res.longitude 
 var speed = res.speed 
 var accuracy = res.accuracy 
}).catch(function () {
 console.error("get location failed")
})

Est-ce facile à comprendre ?

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!