Der Implementierungsprozess der asynchronen Prozessverarbeitung durch Promise im WeChat-Applet

In diesem Artikel werden hauptsächlich relevante Informationen zu den detaillierten Beispielen für die Verwendung von Promise für die asynchrone Prozessverarbeitung in WeChat-Miniprogrammen vorgestellt. Hier finden Sie eine detaillierte Erklärung zur Verwendung von Promise zur Verarbeitung asynchroner Prozesse und stellen spezifische Implementierungsschritte bereit Weiter

Eine detaillierte Erklärung eines Beispiels für die Verwendung von Promise für die asynchrone Prozessverarbeitung in einem WeChat-Applet

Wir wissen, dass JavaScript in einem einzelnen Prozess ausgeführt wird. und synchrone Vorgänge wirken sich auf die Ausführung des Programms aus. Wenn beispielsweise in einem Browser-Seitenprogramm die Ausführung eines Teils synchronisierten Codes lange dauert (z. B. eine große Schleifenoperation), bleibt die Seite hängen.

Daher werden in JavaScript einige asynchrone Funktionen bereitgestellt, um dem Programm Leistungs- und Erfahrungsvorteile zu bieten. Beispielsweise kann der Code in setTimeout(); oder in Webseiten ausgeführt werden, die wir mit der Ajax-Methode erstellen asynchrone Datenanfrage an den Server. Diese asynchronen Codes blockieren den aktuellen Schnittstellenhauptprozess nicht und die Schnittstelle kann weiterhin flexibel arbeiten. Die entsprechende Verarbeitung erfolgt nach Abschluss der asynchronen Codeausführung.

Ein typischer asynchroner Code sieht so aus:

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

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

oder:

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

Dann nennen wir ihn so:

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

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

Dies ist eine Möglichkeit, Rückruffunktionen zu verwenden, um den Fluss der Codeausführung zu steuern. Das scheint gut und leicht zu verstehen.

Wenn wir jedoch zu viele asynchrone Vorgänge in einem Codeabschnitt haben und wir sicherstellen müssen, dass diese asynchronen Vorgänge in der richtigen Reihenfolge ausgeführt werden, sieht unser Code sehr schlecht aus, etwa so:

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

Die Lesbarkeit und Wartbarkeit eines solchen Codes kann man sich vorstellen. Das eigentliche Problem mit der Callback-Funktion ist außerdem:

Sie nimmt uns die Fähigkeit, die Schlüsselwörter „return“ und „throw“ zu verwenden.

Was sind also die Möglichkeiten, dieses Problem zu verbessern? Die Antwort lautet: Ja, die Entstehung des Konzepts des Versprechens löst all dies gut. In Bezug auf Promise gibt es nach der Suche viele Einführungen. Ich werde hier hauptsächlich darüber sprechen, wie wir es zur Lösung unserer Probleme verwenden.

Lassen Sie uns einen Blick darauf werfen, wie das obige Beispiel aussehen würde, wenn wir Promise verwenden würden. Lassen Sie uns zunächst diese Funktionen in Promise ändern:

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

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

Schauen Sie sich dann an, wie sie funktionieren Dies:

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

Auf diese Weise werden diese asynchronen Funktionen nacheinander der Reihe nach ausgeführt.

ES6 unterstützt Promise nativ, aber in Umgebungen, in denen Promise nicht nativ unterstützt wird, verfügen wir über viele Bibliotheken von Drittanbietern, die es unterstützen, wie z. B. Q.js und Bluebird. Zusätzlich zu den Standard-Promise-APIs bieten sie im Allgemeinen einige nicht standardmäßige, aber sehr nützliche APIs, die die Steuerung asynchroner Prozesse eleganter machen.

Aus der API-Dokumentation des WeChat-Applets können wir ersehen, dass viele Funktionen in der vom Framework bereitgestellten JavaScript-API tatsächlich asynchron sind, wie z. B. wx.setStorage(), wx.getStorage(), wx.getLocation () usw. sind auch die bereitgestellten Callback-Verarbeitungsmethoden. Durch Übergabe der Erfolgs-, Fail- und Complete-Callback-Funktionen in den Parametern kann der Erfolg oder Misserfolg des Vorgangs separat verarbeitet werden.

Zum Beispiel:

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")
 }
})

Können wir dafür sorgen, dass die asynchrone API des WeChat-Applets Promise unterstützt? Die Antwort lautet: Ja, natürlich können wir Promise verwenden, um diese APIs einzeln zu verpacken, aber das ist immer noch ziemlich mühsam. Da das Parameterformat der API des Miniprogramms jedoch relativ einheitlich ist, akzeptiert es nur einen Objektparameter und die Rückrufe werden in diesem Parameter festgelegt. Daher bietet dies Komfort für unsere einheitliche Verarbeitung und wir können einen Nicht-Objektparameter schreiben. Aufdringliches Tool. Methode zum Abschließen einer solchen Arbeit:

Angenommen, wir schreiben diese Tool-Methode in eine Datei mit dem Namen 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
}

Danach schauen wir uns an, wie man sie verwendet Diese Methode ändert die ursprüngliche Callback-API in eine Promise-Methode:

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")
})

Ist es leicht zu verstehen?

Das obige ist der detaillierte Inhalt vonDer Implementierungsprozess der asynchronen Prozessverarbeitung durch Promise im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!