Javascript Promises

June 2015 vo' Promises ES6 rap JavaScript Daq arrive, natively use laH. vay' jIH rap wa'DIch Sov pagh: promises nuq vaD, chay' lo'.

Promises nuq?

JavaScript "single-threaded" 'ej sequentially pagh synchronously Qu'. Promises short: multiple functions successively execute: function 2 function 1 complete vaj call. action wa'DIch execute 'ej complete qaSDI' neH next action start. Ajax request vaD useful: Ajax request complete vaj data processing start vaj Promise lo' (success pagh error distinguish). Promise pagh vaj JavaScript Ajax request incomplete 'ach continue, return value empty laH. Promises asynchronous activities vaD neH useful - synchronous vaD JavaScript sequential processing rely. synchronous code simple - top bottom execute, step 2 step 1 complete wait. action complete wait poQ - annoying, time law', script longer. worse: JavaScript code page end Daq place pagh vaj JavaScript execution page rendering compete (JavaScript, CSS, HTML same thread share - script execution page build block) page build slow. end user annoyed, annoyed end users developer annoy.

States

Promise 4 states:

• Pending: Promise part 1 Daq - success pagh failure pagh
• Fulfilled: operation complete -> Fulfilled function start
• Rejected: error occur -> Rejected function execute
• Settled: Promise complete (rejected pagh fulfilled)

if 'ej if 'ej if pagh...?

code many IF queries Daq nest laH - infamous Pyramid of doom. Promises avoid laH.

Syntax

Promise syntax: new Promise(function(resolve, reject) { / CODE / });. code Daq functions resolve() ("fulfilled" status, success) 'ej reject() ("rejected" status, error) call laH.

Basics

short example:

var promise = new Promise(function(resolve, reject) {
  // Hier deinen Code einsetzen, der bei Erfolg success = true setzt
  success === true ? resolve('Gut') : reject('Schlecht');
});
promise.then(function(result) {
  console.log("Erfolg:");
  console.log(result);
}, function(result) {
  console.log("Fehler:");
  console.log(result);
});

code Qu'DI' Promise "Pending", complete vaj "Settled": Fulfilled (success === true, resolve() call) pagh Rejected (success === false, reject() call). Promise constructor callback two parameters: Resolve (action successfully complete) 'ej Reject (error). code complete (promise.then()) vaj resolve() pagh reject() call, "Erfolg: Gut" pagh "Fehler: Schlecht" output. plain: variable promise Promise contain. Promise.then() two functions parameters ("new Promise" Daq define) - promise.then(function resolve(result){}, function reject(result){});. advantage: resolve() reject() Promise code execute qaSDI' neH call. asynchronous Ajax requests vaD useful - request complete vaj data process.

Asynchronous example code

all following examples basis: asynchronous AJAX request.

function GET(target) {
  return new Promise(function(success, error) {
    var request = new XMLHttpRequest();
    request.open("GET", target);
    request.addEventListener("load", function() {
      if (this.status == 200) {
        success('Erfolgreich!');
      } else {
        error(this.status);
      }
    }, false);
    request.send(target);
  });
}

Promising the promise

confusion perfect: resolve() reject() Promise return je - multiple Promises chain laH.

GET("file1.html")
  .then(GET("file2.html"))
  .then(GET("file3.html"));

file1.html wa'DIch load, file2.html, file3.html. "success" function Promise chenmoH neH (different file).

Promise: It will be an array

multiple identical Promises chain poQ pagh. all() method: multiple Promise objects array accept, array functions Hoch Promise execute. small example:

Promise.all([GET("file1.html"), GET("file2.htlm")]).then(
  function (success) {
    console.log(success);
  },
  function (error) {
    console.log("Es trat ein Fehler auf:");
    console.log(error);
  }
);

array functions Hoch Promise Daq pass. error occur vaj error() call, functions Hoch successfully execute vaj success() call. alternatively catch: .catch(function(error) {}); example:

Promise.all([GET("file1.html"), GET("file2.htlm")]).then(
  function(success) {
    console.log(success);
  }).catch(
  function(error) {
    console.error(error);
  });

Fastest Promise

Promise.race() wa' Promise return - wa'DIch complete.

Promise.race([GET("smallfile.jpg"), GET("bigfile.jpg"), GET("extrasmallfile.jpg")]).then(
  function (success) {
    console.log(success);
  }
);

smallfile 200MB, extrasmallfile 2KB, bigfile 3GB. success() call (extrasmallfile call qaSDI'). 3 function calls asynchronous - bigfile smallfile wait pagh, extrasmallfile bigfile wait pagh.