This translation is incomplete. Please help translate this article from English

Het Promise (belofte) object wordt gebruikt voor uitgestelde en asynchrone berekeningen. Een Promise is in één van deze toestanden:

  • pending: initiële toestand, niet vervuld (fulfilled) of verworpen (rejected).
  • fulfilled: successvolle uitvoering
  • rejected: gefaalde uitvoering.
  • settled: de Promise is ofwel vervuld (fulfilled) of verworpen (rejected), maar niet afwachtend (pending).


new Promise(executor);
new Promise(function(resolve, reject) { ... });


Functie object met twee (functie) argumenten resolve en reject. Het eerste argument vervult (fulfill) de promise, het tweede argument verwerpt (reject) de promise. Deze functies kunnen worden aangeroepen eens de berekeningen afgerond zijn.


De Promise interface stelt een proxy voor een waarde voor die niet noodzakelijk gekend is op het ogenblik wanneer de promise (belofte) is gecreëerd. Het laat toe om handlers te associëren met het eventuele succes of falen van een asynchrone actie. Dit laat asynchrone methoden toe om waarden terug te geven zoals synchrone methoden: in plaats van de uiteindelijke waarde geeft een asynchrone methode een promise (belofte) terug die in de toekomst een waarde zal hebben.

Een aanhangige (pending) promise kan ofwel worden vervuld met een waarde ofwel verworpen met een reden. Wanneer één van de twee gebeurt, worden de handlers opgeroepen die geassocieerd zijn door de then methode van de promise. (Als de promise al vervuld of verworpen is wanneer er een corresponderende afhandelaar(handler) aan verbonden wordt, zal deze opgeroepen worden. Zo is er geen race conditie tussen de asychrone operatie van te vervolledigen en zijn afhandelaars van te verbinden.

As the Promise.prototype.then and Promise.prototype.catch methods return promises, they can be chained—an operation called composition.


Length property whose value is 1 (number of constructor arguments).
Represents the prototype for the Promise constructor.


Returns a promise that resolves when all of the promises in the iterable argument have resolved.
Returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with the value or reason from that promise.
Returns a Promise object that is rejected with the given reason.
Returns a Promise object that is resolved with the given value. If the value is a thenable (i.e. has a then method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value.

Promise prototype


Returns the function that created an instance's prototype. This is the Promise function by default.


Appends a rejection handler callback to the promise, and returns a new promise resolving to the return value of the callback if it is called, or to its original fulfillment value if the promise is instead fulfilled.
Appends fulfillment and rejection handlers to the promise, and returns a new promise resolving to the return value of the called handler, or to its original settled value if the promise was not handled (i.e. if the relevant handler onFulfilled or onRejected is not a function).
Appends a handler to the promise, and returns a new promise which is resolved when the original promise is resolved. The handler is called when the promise is settled, whether fulfilled or rejected.


Creating a Promise

This small example shows the mechanism of a Promise. The testPromise() method is called each time the <button> is clicked. It creates a promise that will resolve, using window.setTimeout, to the string 'result' after 1s to 3s (random).

The fulfillment of the promise is simply logged, via a fulfill callback set using p1.then. A few logs shows how the synchronous part of the method is decoupled of the asynchronous completion of the promise.

var promiseCount = 0;
function testPromise() {
  var thisPromiseCount = ++promiseCount;

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

  // We make a new promise: we promise the string 'result' (after waiting 3s)
  var p1 = new Promise(
    // The resolver function is called with the ability to resolve or 
    // reject the promise
    function(resolve, reject) {       
      log.insertAdjacentHTML('beforeend', thisPromiseCount + 
          ') Promise started (<small>Async code started</small>)<br/>');
      // This only is an example to create asynchronism
        function() {
          // We fulfill the promise !
        }, Math.random() * 2000 + 1000);

  // We define what to do when the promise is fulfilled
    // Just log the message and a value
    function(val) {
      log.insertAdjacentHTML('beforeend', val +
          ') Promise fulfilled (<small>Async code terminated</small>)<br/>');

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

This example is executed when clicking the button. You need a browser supporting Promise. By clicking several times the button in a short amount of time, you'll even see the different promise being fulfilled one after the other.

Example using new XMLHttpRequest()

Creating a Promise

This example shows the implementation of a method of success callback and error in XMLHttpRequest Interestingly enough.

'use strict';

// A-> $http function is implemented in order to follow the standard Adapter pattern
function $http(url){
  // A small example of object
  var core = {

    // Method that performs the ajax request
    ajax : function (method, url, args) {

      // Creating a promise
      var promise = new Promise( function (resolve, reject) {

        // Instantiates the XMLHttpRequest
        var client = new XMLHttpRequest();
        var uri = url;

        if (args && (method === 'POST' || method === 'PUT')) {
          uri += '?';
          var argcount = 0;
          for (var key in args) {
            if (args.hasOwnProperty(key)) {
              if (argcount++) {
                uri += '&';
              uri += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]);
        }, uri);

        client.onload = function () {
          if (this.status == 200) {
            // Performs the function "resolve" when this.status is equal to 200
          } else {
            // Performs the function "reject" when this.status is different than 200
        client.onerror = function () {

      // Return the promise
      return promise;

  // Adapter pattern
  return {
    'get' : function(args) {
      return core.ajax('GET', url, args);
    'post' : function(args) {
      return core.ajax('POST', url, args);
    'put' : function(args) {
      return core.ajax('PUT', url, args);
    'delete' : function(args) {
      return core.ajax('DELETE', url, args);
// End A

// B-> Here you define its functions and its payload
var mdnAPI = '';
var payload = {
  'topic' : 'js',
  'q'     : 'Promise'

var callback = {
  success : function(data){
     console.log(1, 'success', JSON.parse(data));
  error : function(data){
     console.log(2, 'error', JSON.parse(data));
// End B

// Executes the method call

Loading an image with XHR

Another simple example using Promise and XMLHttpRequest to load an image is available at the MDN GitHub promise-test repository. You can also see it in action. Each step is commented and allows you to follow the Promise and XHR architecture closely.


Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Promise' in that specification.
Standard Initial definition in an ECMA standard.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 32 24.0 (24.0) as Future
25.0 (25.0) as Promise behind a flag[1]
29.0 (29.0) by default
11 (Modern.IE status) 19 7.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support Niet ondersteund 24.0 (24.0) as Future
25.0 (25.0) as Promise behind a flag[1]
29.0 (29.0) by default
Niet ondersteund Niet ondersteund iOS 8 32

[1] Gecko 24 has an experimental implementation of Promise, under the initial name of Future. It was renamed to its final name in Gecko 25, but disabled by default behind the flag dom.promise.enabled. Bug 918806 enabled Promises by default in Gecko 29.

See also