Ich war sehr begeistert von Promises, seit sie vor einem Jahr eingeführt wurden. Es gibt zwar viele Beiträge und Meinungen dazu, aber Promises machen den Code nicht performanter… sie machen ihn einfacher zu lesen und zu verstehen (was meiner Meinung nach oft viel mehr zählt!)
Im ersten Teil dieses Beitrags erkläre ich die grundlegende Struktur von Promises.
Promises explained in plain english
Here’s the basic structure of a Promise in Javascript:
Ein ziemlich typischer (und schwer fassbarer) Codeschnipsel hier. Ich werde versuchen, aufzuschlüsseln, was hier vor sich geht:
Für den Anfang konzentrieren Sie sich nur auf die Zeilen 1-15:
- Dort ist die Instanziierung. In dieser Zeile wird im Grunde ein Versprechen erstellt. Ein Versprechen in JS muss etwas tun, eine Aufgabe erfüllen. Die Funktion, die hier übergeben wird – function (resolve,reject) {…} ist diese Aufgabe
- Als nächstes sehen Sie den Körper der Aufgabe. Sie können hier Dinge tun. Irgendwo in diesem Codeblock müssen Sie entscheiden, ob die Dinge gut gelaufen sind oder nicht. Wenn Sie zum Beispiel diesen Bereich nutzen, um ein Bild zu holen, haben Sie es entweder erhalten (gut gelaufen) oder nicht (nicht so gut gelaufen).
- Wenn es gut gelaufen ist, rufen Sie eine Funktion auf, die dieses Versprechen als „aufgelöst“ markiert. Wenn es nicht nach Plan gelaufen ist, werden Sie dieses Versprechen „ablehnen“. (Wir werden in einer Sekunde genauer darüber sprechen)
Lassen Sie uns nun auf den verbleibenden Teil des Codeschnipsels konzentrieren, die Zeilen 17-27:
- Bislang haben Sie in den Zeilen 1-15 nur Ihr Promise-Objekt definiert
- In den Zeilen 17 & 22 fügen Sie ihm im Grunde einen Handler zu
- Promise.XXXX (wobei XXX „.then“ oder „.catch“ usw. sein kann) führt im Grunde die im Promise definierte Funktion aus (Zeilen 1-15). Je nachdem, wie die Dinge gelaufen sind (aufgelöst oder abgelehnt), werden die Funktionen in „.then“ bzw. „.catch“ aufgerufen. Wenn Ihr Versprechen also aufgelöst wurde (…die Dinge liefen gut), wird die Funktion in „.then(…)“ ausgeführt, andernfalls wird die Funktion in „.catch(…)“ ausgeführt.
HINWEIS:
- „.then(function)“ gibt ein Versprechen zurück. Außerdem dürfen Sie nur „.then(…)“ oder „.catch(…)“ auf Promise-Objekten aufrufen.
Nachdem wir nun die Grundlagen behandelt haben, wollen wir uns ein interessanteres Beispiel dafür ansehen, was wir mit Promises machen können.
Verkettung von Promises zur Ausführung mehrerer Anfragen
Problem: Vor kurzem bin ich auf eine Situation gestoßen, in der ich eine Reihe von URLs nacheinander abrufen musste. Die Antwort für jede URL musste jedoch je nach URL unterschiedlich behandelt werden.
Für diesen Beitrag nehmen wir an, dass die abgerufenen URLs sind:
- google.com
- apple.com
- amazon.com
Hier ist eine vereinfachte Version des Skripts, das ich verwendet habe, um dies zu handhaben:
Lassen Sie uns dies aufschlüsseln:
- Zeilen 1-11: Erstellen Sie einen einfachen Wrapper um die von jQuery bereitgestellte AJAX Get-Methode. Dies wird einfach die Antwort an den angegebenen Rückruf übergeben.
- Zeilen 18-51: Ich erstelle dann drei Funktionen (ja! Funktionen!), die ein JS-Versprechen zurückgeben
- Jedes Versprechen tut intern Folgendes – verwendet den Ajax-Wrapper, um seine URL zu holen, und sobald die Daten/Antwort empfangen wurden, tut es etwas mit den Daten und ruft schließlich „resolve()“
- In Zeile 54: Ich verkette diese Versprechen nacheinander. Beachten Sie, dass jede dieser Funktionen ein Versprechen zurückgibt (und nicht selbst ein Versprechen ist). Deshalb verwende ich „first()“.then(…) im Gegensatz zu „first.then(…)“
Um das zu verdeutlichen, hier eine Möglichkeit, die Versprechenskette zu betrachten.
Auf diese Weise können Sie nacheinander jede URL abrufen, sie wie gewünscht behandeln und die Funktion „resolved()“ auslösen, um das nächste Versprechen in der Kette auszulösen :
Hinweis: Wenn Sie versuchen, den obigen Codeschnipsel im Browser auszuführen, müssen Sie CORS aktivieren. Hier ist eine Chrome-Erweiterung, die Ihnen dabei helfen kann, dies mit einem einfachen Klick zu tun.
Hoffentlich hat Ihnen dieser Beitrag gefallen.