diff options
Diffstat (limited to 'files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html')
| -rw-r--r-- | files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html | 430 |
1 files changed, 430 insertions, 0 deletions
diff --git a/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html b/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html new file mode 100644 index 0000000000..97dbba8b3e --- /dev/null +++ b/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html @@ -0,0 +1,430 @@ +--- +title: Kontrollfluss und Fehlerbehandlung +slug: Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung +tags: + - Beginner + - Guide + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}</div> + +<p class="summary">JavaScript unterstützt eine Menge von Anweisungen, speziell um Verlaufs-Anweisungen zu kontrollieren, welches eine großartige Methode ist um Interaktivität in deine Anwendung einzuarbeiten. Dieses Kapitel liefert dir ein Überblick über diese Anweisungen.</p> + +<p>Die <a href="/de/docs/Web/JavaScript/Reference/Statements">JavaScript Referenzen</a> beinhalten umfassende Details über die Anweisungen in diesem Kapitel. Das Semikolon (<code>;</code>) als Zeichen wird genutzt um Anweisungen im JavaScript Code einzuteilen.</p> + +<p>Jeder JavaScript Ausdruck ist auch eine Anweisung. Schau ebenfalls in <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren">Ausdrücke und Operatoren</a>, um komplette Informationen über Ausdrücke zu erhalten.</p> + +<h2 id="Block-Anweisungen">Block-Anweisungen</h2> + +<p>Das einfachste Statement ist das Block-Statement, welches genutzt wird um Anweisungen zu gruppieren. Dieser Block wird von einem Paar geschweiften Klammer umschlossen:</p> + +<pre class="syntaxbox">{ + statement_1; + statement_2; + . + . + . + statement_n; +} +</pre> + +<h3 id="Beispiele"><strong>Beispiele</strong></h3> + +<p>Block-Statements werden meistens mit Kontrollfluss-Statements genutzt (z. B. <code>if</code>, <code>for</code>, <code>while</code>).</p> + +<pre class="brush: js">while (x < 10) { + x++; +} +</pre> + +<p>Hier ist, <code>{ x++; }</code> das Block-Statement.</p> + +<p><strong>Wichtig</strong>: JavaScript hat vor ECMAScript2015 <strong>keine </strong>Block-Scopes. Variablen, die in einem Block deklariert werden, gehören zu der Funktion oder dem Skript und das Beschreiben der Variablen führt dazu, dass diese über den Block hinaus verfügbar ist. In anderen Worten, Block-Statements definieren keinen Scope. Alleinstehende Blöcke in JavaScript können komplett andere Ergebnisse erzeugen als in C oder Java. Zum Beispiel:</p> + +<pre class="brush: js">var x = 1; +{ + var x = 2; +} +console.log(x); // outputs 2 +</pre> + +<p>Hier wird 2 ausgegeben, weil <code>var x</code> innerhalb des Blocks im gleichen Scope ist wie das <code>var x</code> vor dem Block. In C oder Java hätte der selbe Code 1 ausgegeben.</p> + +<p>Seit ECMAScript2015 sind <code>let</code> und <code>const</code> Variablendeklarationen, die an den Block gebunden sind. Siehe dazu auch die Referenzseiten {{jsxref("Statements/let", "let")}} und {{jsxref("Statements/const", "const")}} an.</p> + +<h2 id="Bedingte_Statements">Bedingte Statements</h2> + +<p>Ein bedingtes Statement ist eine Menge von Befehlen, die ausgeführt werden, wenn eine Bedingung wahr ist. JavaScript unterstützt zwei bedingte Statements: <code>if...else</code> und <code>switch</code>.</p> + +<h3 id="if...else_Anweisungen"><code>if...else </code>Anweisungen</h3> + +<p><code>if</code> wird eingesetzt um Statements auszuführen, wenn eine logische Bedingung wahr wird. Mit der optionalen <code>else-</code>Klausel werden Statements ausgeführt, wenn die Bedingung falsch ist. Ein <code>if</code>-Block sieht folgendermaßen aus:</p> + +<pre class="syntaxbox">if (bedingung) { + statement_1; +} else { + statement_2; +}</pre> + +<p>Hier kann die Bedingung ein Ausdruck sein, der zu <code>true</code> oder <code>false</code> ausgewertet wird. Siehe <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> nach, um zu erfahren, was zu <code>true</code> und was zu <code>false</code> ausgewertet wird. Wenn <code>bedingung</code> zu <code>true</code> ausgewertet wird, wird <code>statement_1</code> ausgeführt. Andernfalls wird <code>statement_2</code> ausgeführt. <code>statement_1</code> und <code>statement_2</code> können beliebige Statements sein, auch weitere <code>if</code>-Statements.</p> + +<p>Man kann zudem Statements mit <code>else if</code> konstruieren, um mehrere Bedingungen sequentiell zu testen:</p> + +<pre class="syntaxbox">if (bedingung_1) { + statement_1; +} else if (bedingung_2) { + statement_2; +} else if (bedingung_n) { + statement_n; +} else { + statement_last; +} +</pre> + +<p>Um mehrere Statements auszuführen, werden diese in Blockstatements gruppiert (<code>{ ... }</code>). Generell ist es guter Stil immer Block-Statements zu benutzen, besonders bei verschachtelten <code>if</code>-Statements.</p> + +<pre class="syntaxbox">if (bedingung) { + statement_1_runs_if_condition_is_true; + statement_2_runs_if_condition_is_true; +} else { + statement_3_runs_if_condition_is_false; + statement_4_runs_if_condition_is_false; +} +</pre> + +<p>Es ist ratsam, keine einfachen Zuweisungen in Bedingungen zu verwenden, da die Zuordnung mit der Prüfung auf Gleichheit verwechselt werden kann, wenn man über den Code schaut. <span>Verwenden Sie zum Beispiel den folgenden Code nicht:</span></p> + +<pre class="example-bad brush: js">if (x = y) { + /* statements here */ +} +</pre> + +<p>Wenn eine Zuweisung in einer Bedingung benötigt wird, ist es verbreitet diese in weitere runde Klammeren zu schreiben. Zum Beispiel:</p> + +<pre class="brush: js">if ((x = y)) { + /* statements here */ +} +</pre> + +<h4 id="Falsy_Werte">Falsy Werte</h4> + +<p>Die folgenden Werte werden zu <code>false</code> ausgewertet (auch bekannt als {{Glossary("Falsy")}} Werte):</p> + +<ul> + <li><code>false</code></li> + <li><code>undefined</code></li> + <li><code>null</code></li> + <li><code>0</code></li> + <li><code>NaN</code></li> + <li>der leere string (<code>""</code>)</li> +</ul> + +<p>Alle anderen Werte, auch alle Objekte, werden zu <code>true</code> ausgewertet, wenn sie als Bedingung eingesetzt werden.</p> + +<p>Es ist jedoch etwas verwirrend mit den primitiven boolean Werten <code>true</code> und <code>false</code> und den Werten des {{jsxref("Boolean")}}-Objektes, wie folgendes Beispiel zeigt:</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // Die Bedingung wird zu true ausgewertet. +if (b == true) // Die Bedingung wird zu false ausgewertet.</pre> + +<h4 id="Beispiel"><strong>Beispiel</strong></h4> + +<p>Im folgenden Beispiel gibt die Funktion <code>checkData</code> <code>true</code> zurück, wenn die Anzahl der Zeichen in einem <code>Text</code> Objekt drei ist. Andernfalls wird ein Alert angezeigt, und <code>false</code> zurückgegeben.</p> + +<pre class="brush: js">function checkData() { + if (document.form1.threeChar.value.length == 3) { + return true; + } else { + alert("Enter exactly three characters. " + + document.form1.threeChar.value + " is not valid."); + return false; + } +} +</pre> + +<h3 id="switch_Statement"><code>switch</code> Statement</h3> + +<p>Ein <code>switch</code> Statement erlaubt es einen Ausdruck auszuwerten und das Resultat zu einem passenden Fall-Label (case-Label ) zuzuordnen. Wenn ein passendes Fall-Label gefunden wird, werden die zugehörigen Statements ausgeführt. Ein <code>switch</code> Statement sieht wie folgt aus:</p> + +<pre class="syntaxbox">switch (ausdruck) { + case label_1: + statements_1 + [break;] + case label_2: + statements_2 + [break;] + ... + default: + statements_def + [break;] +} +</pre> + +<p>Das Programm sucht als erstes nach eine <code>case</code>-Klausel mit einem Label, welches mit dem Wert des Ausgewerteten Ausdrucks übereinstimmt und gibt die Kontrolle zu dieser Klausel, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn kein passendes Label gefunden wird, sucht das Programm nach der optionalen <code>default</code>-Klausel und gibt die Kontrolle an diese, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn keine <code>default</code>-Klausel vorhanden ist, wird das <code>switch</code> beendet und das nächste Statement wird ausgeführt. Laut Konventionen ist die <code>default</code>-Klausel die letzte Klausel, das muss aber nicht immer so sein.</p> + +<p>Das optionale <code>break</code> Statement, welches in jeder <code>case</code>-Klausel eingesetzt ist, sorgt daführ, dass nach der Klausel das <code>switch</code> Statement beendet wird und das Programm mit dem nachfolgenden Statement weiter macht. Wenn <code>break</code> weggelassen wird, wird das Programm mit dem nächsten Statement im <code>switch</code> weitermachen, was dazu führt, dass alle nachlogenden <code>case</code>-Klauseln und die optionale <code>default</code>-Klausel mit ausgeführt werden.</p> + +<h4 id="Beispiel_2"><strong>Beispiel</strong></h4> + +<p>Im folgenden Beispiel wird der <code>case</code> "Bananas" ausgeführt, wenn <code>fruittype</code> zu "Bananas" ausgewertet wird. Die <code>break</code> Statements bewirken, dass das <code>switch</code> beendet wird und das nach <code>switch</code> stehende Statement ausgeführt wird. Wird <code>break</code> im <code>case </code>"Bananas" weggelassen, so wird der <code>case</code> "Cherries" mit ausgeführt.</p> + +<pre class="brush: js">switch (fruittype) { + case 'Oranges': + console.log('Oranges are $0.59 a pound.'); + break; + case 'Apples': + console.log('Apples are $0.32 a pound.'); + break; + case 'Bananas': + console.log('Bananas are $0.48 a pound.'); + break; + case 'Cherries': + console.log('Cherries are $3.00 a pound.'); + break; + case 'Mangoes': + console.log('Mangoes are $0.56 a pound.'); + break; + case 'Papayas': + console.log('Mangoes and papayas are $2.79 a pound.'); + break; + default: + console.log('Sorry, we are out of ' + fruittype + '.'); +} +console.log("Is there anything else you'd like?");</pre> + +<h2 id="Statements_zur_Fehler-_bzw._Ausnahmebehandlung">Statements zur Fehler- bzw. Ausnahmebehandlung</h2> + +<p>Man kann mit dem <code>throw</code> Statement Fehler werfen (erzeugen) und diese mit dem Einsatz des <code>try...catch</code> Statements auffangen und verarbeiten.</p> + +<ul> + <li><a href="#throw"><code>throw</code> Statement</a></li> + <li><a href="#try-catch"><code>try...catch</code> Statement</a></li> +</ul> + +<h3 id="Ausnahmetypen">Ausnahmetypen</h3> + +<p>Jedes Objekt in JavaScript kann als Fehler bzw. Ausnahme geworfen werden. Nicht alle Fehlerobjekte müssen auf die gleiche Art und Weise erstellt worden sein. Trotz des häufig Einsatzes von Zahlen oder Strings als Ausnahmen ist es deutlich effektiver die speziell für Ausnahmen erstellten Typen zu benutzen:</p> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_Typen">ECMAScript exceptions</a></li> + <li>{{domxref("DOMException")}} und {{domxref("DOMError")}}</li> +</ul> + +<h3 id="throw_Statement"><a id="throw" name="throw"><code>throw</code> Statement</a></h3> + +<p>Das <code>throw</code> Statement wird benutzt, um eine Exception (Ausnahme / Fehler) zu werfen. Wenn eine Exception geworfen wird, so wird ein Ausdruck spezifiziert, welcher den Wert, welcher geworfen wird, spezifiziert:</p> + +<pre class="syntaxbox">throw ausdruck; +</pre> + +<p>Man<span id="result_box" lang="de"><span> kann jeden Ausdruck werfen, nicht nur Ausdrücke eines bestimmten Typs.</span></span> <span id="result_box" lang="de"><span>Der folgende Code wirft mehrere Ausnahmen verschiedenen Typs:</span></span></p> + +<pre class="brush: js">throw "Error2"; // String type +throw 42; // Number type +throw true; // Boolean type +throw {toString: function() { return "I'm an object!"; } }; +</pre> + +<div class="note"><strong>Notiz:</strong> Man kann ein Objekt beim Werfen einer Exception spezifizieren. Im <code>catch</code> Block können die Eigenschaften des Objektes referenziert werden.</div> + +<pre class="brush: js">// Erstellt ein Objekt vom Typ UserException +function UserException (message){ + this.message=message; + this.name="UserException"; +} + +// Macht die Konvertierung der Exception in einen schönen String, wenn die Exception +// als String genutzt werden soll. +// (z. B. in der Fehlerconsole) +UserException.prototype.toString = function () { + return this.name + ': "' + this.message + '"'; +} + +// Erstellt eine Instanz der UserException und wirft diese +throw new UserException("Value too high");</pre> + +<h3 id="try...catch_Statement"><a id="try-catch" name="try-catch"><code>try...catch</code> Statement</a></h3> + +<p>Das <code>try...catch</code> Statement markiert einen Block von Statements, welcher versucht wird auszuführen, und einen oder mehrere Blöcke welche auf geworfene Exceptions abfangen. Wenn eine Exception geworfen wird, fängt das <code>try...catch</code> Statements diese ab.</p> + +<p>Das <code>try...catch</code> Statement besteht aus einem <code>try</code> Block, welcher ein oder mehrere Statements enthält, und null oder mehr <code>catch</code> Blöcken, welche Statements spezifizieren, welche eine im <code>try</code> Block geworfene Exception abfangen und behandeln. Das Statement versucht den <code>try</code> Block erfolgreich abzuarbeiten und wenn dieser nicht erfolgreich ist, wird die Kontrolle an den <code>catch</code> Block gegeben. Wenn ein Statement in dem <code>try</code> Block (oder eine im <code>try</code> Block aufgerufene Funktion) eine Exception wirft, wird der Kontrollfluss sofort an den <code>catch</code> Block übergeben. Wenn keine Exception im <code>try</code> Block geworfen wird, wird der <code>catch</code> Block übersprungen. Der optionale <code>finally</code> Block wird nach dem <code>try</code> und nach dem <code>catch</code> Block ausgeführt, bevor das auf das <code>try...catch</code> Statement folgenden Statement ausgeführt wird.</p> + +<p>Das Folgende Beispiel benutzt ein <code>try...catch</code> Statement. Das Beispiel ruft eine Funktion auf, welche einen Monatsnamen aus einen Array zurückgibt, je nachdem, welcher Wert übergeben wurde. Wenn der übergebene Wert keine korrekte Monatsnummer ist (1 - 12), dann wird eine Exception mit dem Wert <code>"InvalidMonthNo"</code> geworfen und die Statements im <code>catch</code> Block setzen die <code>monthName</code> Variable auf <code>unknown</code>.</p> + +<pre class="brush: js">function getMonthName (mo) { + mo = mo-1; // Justiert Monatsnummer zu Arrayindex (1=Jan, 12=Dec) + var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul", + "Aug","Sep","Oct","Nov","Dec"]; + if (months[mo] != null) { + return months[mo]; + } else { + throw "InvalidMonthNo"; // throw Schlüsselwort wird hier benutzt + } +} + +try { // statements to try + monthName = getMonthName(myMonth); // Funktion die Exceptions werfen kann +} +catch (e) { + monthName = "unknown"; + logMyErrors(e); // Gibt Exception Objekt weiter für Fehlerbehandlung +} +</pre> + +<h4 id="The_catch_Block" name="The_catch_Block">Der <code>catch</code> Block</h4> + +<p>Man kann einen <code>catch</code> Block einsetzen, um alle Exceptions, die im <code>try</code> Block generiert werden, zu verarbeiten.</p> + +<pre class="syntaxbox">catch (catchID) { + statements +} +</pre> + +<p>Der <code>catch</code> Block spezifiziert einen Variable (<code>catchID</code> im voranstehenden Syntaxbeispiel), welcher den Wert des <code>throw</code> Statements enthält. Man kann über diese Variable Informationen über die geworfene Exception abfragen. JavaScript erstellt diese Variable, wenn der Programmfluss in den <code>catch</code> Block geht. Die Variable existiert nur in dem <code>catch</code> Block. Nach dem beenden des <code>catch</code> Blocks ist die Variable nicht mehr verfügbar.</p> + +<p>Im nächsten Beispeil wird eine Exception geworfen. Wenn die Exception geworfen wird, wird der Programmfluss in den <code>catch</code> Block gegeben.</p> + +<pre class="brush: js">try { + throw "myException" // Erstellt eine Exception +} +catch (e) { + // Statements, die die Exception verarbeiten + logMyErrors(e) // Verarbeitet Exception Objekt zur Fehlerbehandlung +} +</pre> + +<h4 id="Der_finally_Block">Der <code>finally</code> Block</h4> + +<p>Der <code>finally</code> Block enthält Statements, welche nach dem <code>try</code> und <code>catch</code> Block ausgeführt werden, bevor das Statement nach dem <code>try...catch</code> Statement ausgeführt wird. Der <code>finally</code> Block wird ausgeführt, egal ob eine Exception geworfen wird oder nicht. Wenn eine Exception geworfen wird, wird der <code>finally</code> auch ausgeführt, wenn kein <code>catch</code> die Exception abfängt.</p> + +<p>Man kann den <code>finally</code> Block benutzen, um Skripte fehlertoleranter zu gestalten. Zum Beispiel kann eine Ressource im <code>finally</code> Block geschlossen werden. Das Folgende Beispiel öffnet eine Datei und führt Statements aus, um die Datei zu benutzen (Serverseitiges JavaScript erlaubt Zugriffe auf Dateien). Wenn eine Exception geworfen wird, während die Datei geöffnet ist, sorgt der <code>finally</code> Block dafür, dass die Datei wieder geschlossen wird.</p> + +<pre class="brush: js">openMyFile(); +try { + writeMyFile(theData); //Das kann Exceptions werfen +} catch(e) { + handleError(e); // Wenn eine Exception geworfen wird, wird sie hier verarbeitet +} finally { + closeMyFile(); // Schließt immer die Ressource +} +</pre> + +<p>Wenn der <code>finally</code> Block einen Rückgabewert definiert, ist dieser der Rückgabewert des <code>try-catch-finally</code> Prozedur, unabhängig davon, ob <code>return</code> Statements im <code>try</code> und <code>catch</code> Block verwendet werden.</p> + +<pre class="brush: js">function f() { + try { + console.log(0); + throw "bogus"; + } catch(e) { + console.log(1); + return true; // Dieses return Statement is überflüssig + // weil im finally Block ebenfalls eins vorhanden ist + console.log(2); // wird niemals erreicht + } finally { + console.log(3); + return false; // überschreibt früheres return Statements + console.log(4); // wird niemals erreicht + } + // false wird jetzt zurückgegeben + console.log(5); // wird niemals erreicht +} +f(); // alerts 0, 1, 3; returns false +</pre> + +<p>Das Überschreiben des Rückgabewertes durch den <code>finally</code> Block überschreibt auch geworfene Exceptions, wenn diese im <code>catch</code> geworfen werden.</p> + +<pre class="brush: js">function f() { + try { + throw "bogus"; + } catch(e) { + console.log('caught inner "bogus"'); + throw e; // Dieses throw Statement is überflüssig + // weil im finally Block ein return vorkommt + } finally { + return false; // Überschreibt das vorherige "throw" + } + // false wird zurückgegeben +} + +try { + f(); +} catch(e) { + // Dieser bereich wird nie erreicht, weil + // die Exception durch das return im + // finally block überschrieben wird. + console.log('caught outer "bogus"'); +} + +// OUTPUT +// caught inner "bogus"</pre> + +<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">Verschachtelte try...catch Statements</h4> + +<p>Man kann mehrere <code>try...catch</code> Statements ineinander verschachteln. Wenn ein inneres <code>try...catch</code> Statements keinen <code>catch</code> Block hat, wird ein äußeres <code>try...catch</code> Statement mit einem <code>catch</code> Block eine Exception auffangen. Mehr Informationen gibt es im Kapitel <a href="/de/docs/Web/JavaScript/Reference/Statements/try...catch#Verschachtelte_try-Blöcke">Verschachtelte try-Blöcke</a> auf der <code><a href="/de/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> Seite.</p> + +<h3 id="Nützliche_Verwendung_des_Error_Objekts">Nützliche Verwendung des <code>Error</code> Objekts</h3> + +<p>Abhängig vom der Art des Fehlers, möchte man die Möglichkeit haben einen Namen und eine Fehlernachricht zu vergeben. 'name' und 'message' Eigenschaften sind generell durch die Klasse Error (z. B. <code>DOMException</code> oder <code>Error</code>) unterstützt. Die 'message' Eigenschaft ist dabei eine String-Repräsentation des Fehlers, so wie sie bei der Konvertierung des Objektes zu einem String benötigt wird.</p> + +<p>Wenn man beim Werfen von eigenen Exceptions die Vorteile dieser Eigenschaften nutzen möchte (wenn zum Beipsiel der <code>catch</code> Block nicht zwischen eigenen und System Exceptions unterscheidet), kann der Konstruktor von Error benutzt werden. Zum Beispiel:</p> + +<pre class="brush: js">function doSomethingErrorProne () { + if (ourCodeMakesAMistake()) { + throw (new Error('The message')); + } else { + doSomethingToGetAJavascriptError(); + } +} +.... +try { + doSomethingErrorProne(); +} +catch (e) { + console.log(e.name); // logs 'Error' + console.log(e.message); // logs 'The message' or a JavaScript error message) +}</pre> + +<h2 id="Promises">Promises</h2> + +<p>Mit ECMAScript 6 hat JavaScript die Unterstützung für {{jsxref("Promise")}} Objekte bekommen, welche zum Steuern von asynchronen Operationen genutzt wird.</p> + +<p>Ein <code>Promise</code> ist in einem der folgenen Status:</p> + +<ul> + <li><em>pending</em>: <span class="short_text" id="result_box" lang="de"><span>Anfangszustand, nicht erfolgreich oder fehlerhaft beendet.</span></span></li> + <li><em>fulfilled</em>: Erfolgreiche Operation</li> + <li><em>rejected</em>: Gescheiterte Operation.</li> + <li><em>settled</em>: <span id="result_box" lang="de"><span>Das </span></span><code>Promise</code> <span lang="de"><span>ist entweder erfüllt oder abgelehnt, aber nicht </span></span><em>pending</em><span lang="de"><span>.</span></span></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> + +<h3 id="Ein_Bild_mit_XHR_laden">Ein Bild mit XHR laden</h3> + +<p>Ein einfaches Beispiel für den Einsatz von <code>Promise</code> und <code><a href="/de/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> ist das Laden eines Bildes (Siehe MDN GitHub <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a> Repository; man kann es hier auch <a href="https://mdn.github.io/js-examples/promises-test/">in Aktion sehen</a>). Jeder Schritt ist Kommentiert und erlaubt es der Architektur des Promise und XHR zu folgen. Hier ist die unkommentierte Version, welche den <code>Promise</code> Ablauf zeigt, zu sehen, so dass man eine Idee davon bekommt.</p> + +<pre class="brush: js">function imgLoad(url) { + return new Promise(function(resolve, reject) { + var request = new XMLHttpRequest(); + request.open('GET', url); + request.responseType = 'blob'; + request.onload = function() { + if (request.status === 200) { + resolve(request.response); + } else { + reject(Error('Image didn\'t load successfully; error code:' + + request.statusText)); + } + }; + request.onerror = function() { + reject(Error('There was a network error.')); + }; + request.send(); + }); +}</pre> + +<p>Für deteiliertere Informationen, kann man sich die {{jsxref("Promise")}} Referenz Seite und den <a href="/de/docs/Web/JavaScript/Guide/Using_promises">Using Promises Guide</a> anschauen.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}</div> |