Promise erzeugt Promise

Wir rufen zwar die Promise-Methode then() mit unseren Handlern auf, aber ein Ergebnis (Rückgabewert) haben wir nicht betrachtet. Das holen wir nach.

Die Zeilen Log('Anfang'); undLog('Ende'); in unserem Beispiel brauchen wir nicht mehr und entfernen sie, dann ist in unserem Display nur noch die Anzeige vom Promise zu sehen.

Die Rückgabe schauen wir uns nun am einfachsten über alert() an:

// Main

alert (mypromise.then(Log, Err));  // [object Promise]

alert() zeigt eindeutig, dass ein Objekt vom Typ Promise zurückgegeben wird. Das Beispiel hier anschauen.

Ein Promise-Aufruf gibt ein Promise zurück - okay.
Allerdings: Es ist eben ein Objekt, die Instanzierung (und damit der innere Prozess) bleibt uns verborgen.

Wir könnten vermuten, dass das neue Promise ebenfalls Handler für Erfolg und Fehler erwartet. Dann hängen doch einfach die Methode then() mit unseren Handlern Log() und Err() an. Das sieht dann so aus:

// Main
const mypromise = new Promise(myfunction);

let secondPromise = (mypromise.then(Log, Err)); // Variable secondPromise 
                                                // instanziert mit zweitem Promise 
secondPromise.then(Log, Err);                   // Aufruf von then() am zweiten Promise

Der Code in dieser Schreibweise ist korrekt und macht die Vorgänge deutlich, das können wir gern ausprobieren. Allerdings wird diese Schreibweise nicht favorisiert. So können wir die Variable secondPromise glatt einsparen, wenn wir das zweite .then() gleich an die Initialisierung anhängen:

// Main
const mypromise = new Promise(myfunction);

(mypromise.then(Log, Err)).then(Log, Err); // Variable secondPromise eingespart

Es geht noch kürzer. Der Ausdruck mypromise.then(Log, Err) repräsentiert das zweite Promise auch ohne die Klammern außenherum, folglich ist auch richtig zu schreiben:

// Main
const mypromise = new Promise(myfunction);

mypromise.then(Log, Err).then(Log, Err); 

Des Überblick halber schreibt man die .then()-Aufrufe untereinander auf je eine neue Zeile
und das ist dann die favorisierte Schreibweise:

// Main
const mypromise = new Promise(myfunction);

mypromise
.then(Log, Err)
.then(Log, Err); 

Aber aufpassen; keine Semikolon dazwischen setzen, denn es muss wie eine einzige lange Code-Zeile funktionieren.

Nun wird es aber Zeit, dass wir das Programm starten.
Je nach zufälligem Ergebnis des ersten Promise sehen wir eine Anzeige,

die so: Screenshot 5

oder so sein kann: Screenshot 6

Das Beispiel hier ansehen.

Die erste Zeile im Display kommt vom ersten Promise (da hat sich auch nichts geändert),
die zweite Zeile vom zweiten Promise.

Das zweite Promise ruft offenbar nur den Log-Handler auf und nie der Err-Handler, egal wie oft wir das Programm starten. Und es kommen offensichtlich keine Daten an (undefined).

Wir versuchen das erste Promise zu veranlassen, Daten zurückzugeben, etwa im Instanzierungscode.

let myfunction = function (resolve, reject) {
  const num = Math.random();
  if (num >= 0.5) {
    resolve(num);
  } else {
    reject(num);
  }
  return num; // Rückgabe hinzugefügt - bringt aber nichts
}

Aber leider, da passiert gar nichts; also die return-Anweisung wieder entfernen.

Im nächsten Versuch veranlassen wir die Handler, ihren Parameterwert zurückzugeben. Damit wir die Rückgabewerte unterscheiden können, wird bei Log() der Wert 10 hinzuaddiert, bei Err() der Wert 20.

function Log(parm) { Display.innerHTML += 'Ok : ' + parm + '<br>'; return parm + 10; }
function Err(parm) { Display.innerHTML += 'Err: ' + parm + '<br>'; return parm + 20; }

So, und jetzt tut sich was:

Wenn erstes Promise Log() aufruft: Screenshot 7

Wenn erstes Promise Err() aufruft: Screenshot 8

Das Beispiel hier ansehen.

Dass die Methode then() eine neues Promise zurückgibt, haben wir gesehen. Also ist anzunehmen, dass unser zweites Promise mit then() ein drittes Promise zurückgeben würde usw. usw. - ohne Ende!

Wir können weiter annehmen, dass alle Folge-Promise sich genauso verhalten, also nur den Handler für den Erfolgsfall verwenden. Wir werden bei allen Folge-Promise den Handler Err() gleich weglassen.

Hier mal eine wunderschöne Promise-Kette:

// Main
const mypromise = new Promise(myfunction);

// 5 Promise !
mypromise
.then(Log, Err)
.then(Log)
.then(Log)
.then(Log)
.then(Log);

Wenn erstes Promise Log() aufruft: Screenshot 9

Wenn erstes Promise Err() aufruft: Screenshot 10

Das Beispiel hier ansehen.

Jedes sekundäre Promise verwendet in unserem Beispiel die Funktion Log() als Handler, der in jeder Stufe den erhaltenen Wert um 10 erhöht und weitergibt. Unser Beispiel ist natürlich nur ein Demo. Bei produktiven Anwendungsfällen kann man sich eine sinnvollere Weiterverarbeitung vorstellen.

Weiterlesen? Siehe Promise von fetch().