path: root/files/de/web/javascript/reference/global_objects/promise/index.html

---
title: Promise
slug: Web/JavaScript/Reference/Global_Objects/Promise
translation_of: Web/JavaScript/Reference/Global_Objects/Promise
---
<div>{{JSRef}}</div>

<p>Das <strong><code>Promise</code></strong> Objekt stellt eine Repräsentation einer eventuellen Ausführung (oder eines Fehlschlags) einer asynchronen Operation und den daraus resultierenden Ergebnissen dar.</p>

<p>Um mehr darüber zu erfahren wie promises funktionieren und wie diese verwendet werden sollte zuerst <a href="/de-DE/docs/Web/JavaScript/Guide/Using_promises">Promises benutzen</a> gelesen werden.</p>

<dl>
</dl>

<h2 id="Beschreibung">Beschreibung</h2>

<p>Das <strong><code>Promise-Objekt (dt./deutsch Ein Versprechens-Objekt, das später eingelöst wird)</code></strong>wird für asynchrone Berechnungen verwendet.</p>

<p>Ein <code>Promise</code> kann sich in einem von drei Zuständen befinden:</p>

<ul>
 <li><em>pending</em> (schwebend): initialer Status, weder fulfilled noch rejected.</li>
 <li><em>fulfilled</em> (erfüllt): heisst das die Operation erfolgreich abgeschlossen wurde.</li>
 <li><em>rejected</em> (zurück gewiesen): heisst das die Operation gescheitert ist.</li>
</ul>

<p>Ein weiterer Begriff beschreibt den Zustand <em>settled (erledigt aber nicht zwingend erfolgreich)</em>: Der Promise ist entweder <em>fulfilled</em> oder <em>rejected</em>, aber nicht <em>pending</em>.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate">new Promise(<em>executor</em>);
new Promise(function(resolve, reject) { ... });</pre>

<h3 id="Parameter">Parameter</h3>

<dl>
 <dt>executor (Ausführer)</dt>
 <dd>Funktion mit den zwei Argumenten <code>resolve</code> und <code>reject</code>. Das erste Argument führt den Promise aus, das zweite verwirft ihn. Die Funktionen können ausgeführt werden, sobald die Operation durchgeführt wurde.</dd>
</dl>

<h2 id="Beschreibung_2">Beschreibung</h2>

<p>Das <code><strong>Promise</strong></code>-Interface repräsentiert einen Proxy für einen Wert, der nicht zwingend bekannt ist, wenn der Promise erstellt wird. Das erlaubt die Assoziation zwischen <em>Handler</em> und dem Gelingen oder Fehlschlagen einer asynchronen Aktion. Mit diesem Mechanismus können asynchrone Methoden in gleicher Weise Werte zurück geben wie synchrone Methoden: Anstelle des endgültigen Wertes wird ein <em>Promise</em> zurückgegeben, dass es zu einem Zeitpunkt in der Zukunft einen Wert geben wird.</p>

<p>Ein Promise mit dem Status <em>pending</em> kann entweder zu <em>fulfilled</em> mit Wert oder zu einem <em>rejected</em> mit Grund werden. Wenn einer dieser Fälle eintritt, werden die assoziierten <em>Handler</em>, die über die <em>then</em>-Methode gequeued wurde, aufgerufen. Ist ein Promise bereits in fullfilled oder rejected und wird erst dann ein entsprechender <em>Handler</em> hinzugefügt, dann wird dieser Handler aufgerufen. Es gibt somit keine <em>Race Conditions</em> zwischen der Ausführung der asynchronen Aktion und dem Hinzufügen des <em>Handlers</em>.</p>

<p>Da die Methoden<code> Promise.prototype.then</code> und <code>Promise.prototype.catch</code> Promises zurückgeben, können sie aneinander gereiht werden (Komposition).</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>

<h2 id="Properties">Properties</h2>

<dl>
 <dt><code>Promise.length</code></dt>
 <dd><em>Length</em>-Attribut mit dem Wert 1 (Anzahl der Konstruktorargumente).</dd>
 <dt>{{jsxref("Promise.prototype")}}</dt>
 <dd>Repräsentiert den Prototyp für den <code>Promise</code>-Konstruktor.</dd>
</dl>

<h2 id="Methoden">Methoden</h2>

<dl>
 <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt>
 <dd>Gibt einen <code>Promise</code> zurück, der aufgelöst wird, sobald alle Promises in dem <code>iterable</code>-Argument aufgelöst wurden.</dd>
 <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt>
 <dd>Gibt einen <code>Promise</code> zurück, der aufgelöst oder verworfen wird, sobald einer der Promises in dem <code>iterable</code>-Argument aufgelöst oder verworfen wurde, und den Wert oder den Grund dieses Promise enthält.</dd>
</dl>

<dl>
 <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt>
 <dd>Gibt einen <code>Promise</code> zurück, der mit dem angegeben Grund (<code>reason</code>) verworfen wird.</dd>
</dl>

<dl>
 <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt>
 <dd>Gibt einen <code>Promise</code> zurück, der mit <code>value</code> aufgelöst wird. Falls der Wert ein <em>thenable</em> ist (Objekt besitzt eine <code>then</code>-Methode), folgt der zurückgegebene <code>Promise</code> dem <em>thenable</em> und übernimmt den Status. Andernfalls wird der zurückgegebene <code>Promise</code> auf <em>fulfilled</em> gesetzt.</dd>
</dl>

<h2 id="Promise-Prototyp"><code>Promise</code>-Prototyp</h2>

<h3 id="Eigenschaften">Eigenschaften</h3>

<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Eigenschaften')}}</p>

<h3 id="Methoden_2">Methoden</h3>

<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methoden')}}</p>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Einen_Promise_erstellen">Einen Promise erstellen</h3>

&lt;div id="log"&gt;&lt;/div&gt;
</pre>

<p>Dieses kleine Beispiel zeigt den Mechanismus eines <code>Promise</code>. Die Methode <code>testPromise() </code>wird jedes Mal aufgerufen, wenn der {{HTMLElement("button")}} geklickt wurde. Es wird ein Promise erstellt, der mithilfe von <code>window.setTimeout</code> nach einer zufällig gewählten Zeit (1-3 s) zu <code>'result'</code> aufgelöst wird.</p>

<p>Die Ausführung der Promises wird mit einem <em>fulfill</em>-Callback unter Verwendung von <code>p1.then</code> gelogt. Durch ein paar Logeinträge wird gezeigt, wie der synchrone Teil der Methode von der asynchronen Vollendung des Promises abgekoppelt ist.</p>

<pre class="brush: js notranslate">var promiseCount = 0;
function testPromise() {
  var thisPromiseCount = ++promiseCount;

  var log = document.getElementById('log');
  log.insertAdjacentHTML('beforeend', thisPromiseCount +
      ') Started (&lt;small&gt;Sync code started&lt;/small&gt;)&lt;br/&gt;');

  // Wir erstellen einen neuen Promise: wir versprechen den String 'result' (Wartezeit max. 3s)
  var p1 = new Promise(
    // Resolver-Funktion kann den Promise sowohl auflösen als auch verwerfen
    // reject the promise
    function(resolve, reject) {
      log.insertAdjacentHTML('beforeend', thisPromiseCount +
          ') Promise started (&lt;small&gt;Async code started&lt;/small&gt;)&lt;br/&gt;');
      // nur ein Beispiel, wie Asynchronität erstellt werden kann
      window.setTimeout(
        function() {
          // We fulfill the promise !
          resolve(thisPromiseCount)
        }, Math.random() * 2000 + 1000);
    });

  // wir bestimmen, was zu tun ist, wenn der Promise fulfilled
  p1.then(
    // Loggen der Nachricht und des Wertes
    function(val) {
      log.insertAdjacentHTML('beforeend', val +
          ') Promise fulfilled (&lt;small&gt;Async code terminated&lt;/small&gt;)&lt;br/&gt;');
    });

  log.insertAdjacentHTML('beforeend', thisPromiseCount +
      ') Promise made (&lt;small&gt;Sync code terminated&lt;/small&gt;)&lt;br/&gt;');
}
</pre>

<pre class="brush:js notranslate" class="hidden">if ("Promise" in window) {
  btn = document.getElementById("btn");
   btn.addEventListener("click",testPromise);
}
else {
  log = document.getElementById('log');
  log.innerHTML = "Live example not available as your browser doesn't support the Promise interface.";
}
</pre>

<p>Dieses Beispiel wird ausgeführt, wenn der Button geklickt wird. Man benötigt einen Browser, der <em>Promise</em> unterstützt. Durch mehrmaliges Klicken in kurzer Zeit kann beobachtet werden, wie die einzelnen Promises nacheinander <em>fulfilled</em> werden.</p>

<p>{{EmbedLiveSample("Creating_a_Promise", "500", "200")}}</p>

<h3 id="Laden_eines_Bildes_mit_XHR">Laden eines Bildes mit XHR</h3>

<p>Ein weiteres, einfaches Beispiel für die Verwendung von Promises und <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHTTPRequest</a>,</code> um ein Bild zu laden, ist in dem MDN GitHub <a href="https://github.com/mdn/js-examples/blob/master/promises-test/index.html">promise-test</a> Repository. <a href="https://mdn.github.io/js-examples/promises-test/">Hier </a>kannst du es in Aktion sehen. Jeder Schritt ist kommentiert und erlaubt die den Promises und der XHR-Architektur nachzuvollziehen.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td><a href="https://github.com/domenic/promises-unwrapping">domenic/promises-unwrapping</a></td>
   <td>Draft</td>
   <td>Standardisierung findet hier statt.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-promise-objects', 'Promise')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Initiale Definition als ein ECMA-Standard.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatiblität">Browserkompatiblität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic Support</td>
   <td>32</td>
   <td>{{CompatGeckoDesktop(24.0)}} als <code>Future</code><br>
    {{CompatGeckoDesktop(25.0)}} als <code>Promise</code> hinter einem Flag[1]<br>
    {{CompatGeckoDesktop(29.0)}} per Default</td>
   <td>{{CompatNo}}</td>
   <td>19</td>
   <td>7.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic Support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile(24.0)}} als <code>Future</code><br>
    {{CompatGeckoMobile(25.0)}} als <code>Promise</code> hinter einem Flag[1]<br>
    {{CompatGeckoMobile(29.0)}} per Default</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>iOS 8</td>
   <td>32</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Gecko 24 hat eine experimentelle Implementierung von <em>Promises</em> unter dem vorherigen Namen <em>Future</em>. In Gecko 25 wurde sie in ihren endgültigen Namen umbenannt, wird aber per Default durch das Flag <code>dom.promise.enable</code> unterdrückt. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> aktiviert Promises per Default in Gecko 29.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
 <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li>
 <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patter in JavaScript</a></li>
 <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li>
 <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li>
 <li>Fussnote1: bitte die englischen Begriffe in dieser Übersetzung stehen lassen, da sonst der Zusammenhang zu englischen Dokumentation völlig verloren geht. Worte wie 'Promise' sollte man sich merken, um sie auch in englisch zu verstehen.</li>
</ul>