JavaScript-Studienhandbuch: Rückrufprobleme_Grundkenntnisse

Callback Hell

Für JavaScript-Programmierer ist der Umgang mit Rückrufen alltäglich, aber der Umgang mit Rückrufen, die zu tief sind, ist nicht so schön. Das folgende Beispielcode-Snippet verwendet drei Ebenen von Rückrufen. Es ist einfach sauer ist die legendäre Callback-Hölle.

getDirectories(function(dirs) {
  getFiles(dirs[0], function(files) {
    getContent(files[0], function(file, content) {
      console.log('filename:', file);
      console.log(content);
    });
  });
});
 
function getDirectories(callback) {
 setTimeout(function() {
  callback(['/home/ben']);
 }, 1000);
}
 
function getFiles(dir, callback) {
  setTimeout(function() {
    callback([dir + '/test1.txt', dir + '/test2.txt']);
  }, 1000)
}
 
function getContent(file, callback) {
  setTimeout(function() {
    callback(file, 'content');
  }, 1000)
}

Lösung

Es gibt viele asynchrone Lösungen im Ökosystem, die das Problem der Callback-Hölle bewältigen können, wie z. B. Bluebird, Q usw. Dieser Artikel konzentriert sich auf die Unterstützung der asynchronen Programmierung in der ECMAScript 6/7-Spezifikation.

ES6-Versprechen

Promise ist eine Lösung für die asynchrone Programmierung und ein leistungsstarkes Tool zur Lösung des Problems der Callback-Hölle.

Promise wurde 2007 vom Mainstream im JavaScript-Ökosystem akzeptiert, als das Dojo-Framework die Funktion dojo.Deferred hinzufügte. Mit der Popularität von dojo.Deferred schlug Kris Zyp 2009 die CommonJS Promises/A-Spezifikation vor. Anschließend erschien eine große Anzahl von Promise-Implementierungen im Ökosystem, darunter Q.js, FuturesJS usw. Natürlich ist die Popularität von Promise größtenteils auf die Existenz von jQuery zurückzuführen, aber jQuery entspricht nicht vollständig der CommonJS Promises/A-Spezifikation. Wie Sie sehen, enthält die ES 6-Spezifikation Versprechen.
MDN beschreibt Promise wie folgt:

Das Promise-Objekt ist ein Proxy, der einen Wert zurückgibt, wenn das Promise-Objekt erstellt wird. Sie können damit Behandlungsmethoden für den Erfolg oder Misserfolg asynchroner Vorgänge angeben. Dadurch können asynchrone Methoden genau wie synchrone Methoden Werte zurückgeben: asynchrone Methoden geben ein
zurück, das den ursprünglichen Rückgabewert enthält. Der folgende Code ist das durch Promise implementierte Beispiel im Abschnitt „Callback Hell“. Der Code scheint nicht sehr prägnant zu sein, ist aber im Vergleich zu herkömmlichen hierarchischen Rückrufen deutlich verbessert und der Code ist besser wartbar und lesbar.

getDirectories().then(function(dirs) {
  return getFiles(dirs[0]);
}).then(function(files) {
  return getContent(files[0]);
}).then(function(val) {
  console.log('filename:', val.file);
  console.log(val.content);
});
 
function getDirectories() {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
    resolve(['/home/ben']);
   }, 1000);
  });
}
 
function getFiles(dir) {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
      resolve([dir + '/test1.txt', dir + '/test2.txt']);
    }, 1000);
  });
}
 
function getContent(file) {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
      resolve({file: file, content: 'content'});
    }, 1000);
  });
}

ES6-Generator

Die Umsetzung von Promise ist nicht prägnant genug. Wir brauchen auch bessere Optionen, und Co ist eine der Optionen. co ist ein asynchroner Flussregler, der auf Generator basiert. Bevor Sie co verstehen, müssen Sie zunächst Generator verstehen. Studierende, die mit C# vertraut sind, sollten wissen, dass C# Version 2.0 das Schlüsselwort yield für iterative Generatoren eingeführt hat. Der ES 6 Generator ähnelt C#. Er verwendet außerdem die Yield-Syntax Sugar und implementiert intern eine Zustandsmaschine. Informationen zur spezifischen Verwendung finden Sie im Abschnitt „Funktionen*“ der MDN-Dokumentation. Weitere Informationen zu Generator finden Sie im Blog des AlloyTeam-Teams. Verwenden Sie co, um ES6 Generator und ES6 Promise geschickt zu kombinieren, um asynchrone Anrufe harmonischer zu gestalten.

co(function* (){
  var dirs = yield getDirectories();
  var files = yield getFiles(dirs[0]);
  var contentVal = yield getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
});

co ist sehr clever. Die allgemeine Idee besteht darin, den Generator rekursiv zu durchlaufen. Natürlich kann co mehr tun.

runGenerator();
 
function* run(){
  var dirs = yield getDirectories();
  var files = yield getFiles(dirs[0]);
  var contentVal = yield getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
}
 
function runGenerator(){
  var gen = run();
 
  function go(result){
    if(result.done) return;
    result.value.then(function(r){
      go(gen.next(r));
    });
  }
 
  go(gen.next());
}

ES7 Async/Warten

ES6 Generator ist zwar sehr gut, erfordert aber leider die Unterstützung von Bibliotheken Dritter. Die gute Nachricht ist, dass ES 7 das Schlüsselwort Async/Await einführen wird, um das Problem asynchroner Aufrufe perfekt zu lösen. Nun, .net ist einen Schritt voraus, .net Framework 4.5 hat bei der Unterstützung die Führung übernommen.
Der in Zukunft zu schreibende Code sieht folgendermaßen aus:

run();
async function run() {
  var dirs = await getDirectories();
  var files = await getFiles(dirs[0]);
  var contentVal = await getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
}

Fazit

Von der klassischen asynchronen Callback-Programmiermethode über die Verbesserung der asynchronen Programmierung in der ES6 Promise-Spezifikation bis hin zur eleganten Verarbeitung von CO in Kombination mit ES Generator und schließlich dem perfekten Ende von ES7 async/await, das uns das Verständnis ermöglicht Warum diese Funktionen in ECMAScript erscheinen und welche Probleme gelöst wurden, und wir können den Entwicklungstrend der asynchronen JavaScript-Programmierung klarer erkennen.