I will use Plunkr as an editor and Traceur to support ES6 Javascript code. Traceur is a library to provide the necessary ES6 polyfills and shims to allow using ES6 JS code in browsers, regardless of their lacking support of ES6. Of course, more and more browsers support different functionality in ES6 already.
I will also use Jasmine to test out these Promise(s) using Test Driven Development (TDD) library Jasmine.
First off, we need to add in Traceur and Jasmine. I also include jQuery here. You might want to include these libraries with a local copy and not through a Content Delivery Network (CDN). Add first this to your HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link data-require="jasmine@2.4.1" data-semver="2.4.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css" />
<script data-require="jasmine@2.4.1" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
<script data-require="jasmine@2.4.1" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
<script data-require="jasmine@2.4.1" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
After adding in the necessary HTML code we will make use of Jasmine. We also create a simple helper function to return a Promise object to a function that returns a Promise object.
function getPromise(value, delay){
return new Promise(resolve => {
setTimeout(() => resolve(value), delay);
});
}
describe("Promises in Ecmascript 6", function(){
it("should execute Promise.race with expected result", function (done){
let promise1 = getPromise('value: 1', 350);
let promise2 = getPromise('value: 2', 450);
let promise3 = getPromise('value: 3', 550);
let fastestPromise = Promise.race([promise1, promise2, promise3 ]);
// console.log(fastestPromise);
fastestPromise.then(result => {
expect(result).toBe('value: 1');
done();
}); //then
}); //it
}); //describe
We use the built in functionality of Jasmine to test out and wait for asynchronous code to complete, passing into the SPEC function (the function named it) the parameter of done. By calling done(); we signal to Jasmin that the asynchronous code should have completed. Jasmin will wait for a specified time and signal a timeout if it does receive the result from the asynchronous operation. We also here use ES6 arrow functions in the setTimeout method for compact syntax and we use setTimeout to simulate an easy asynchronous operation. Then we build up three Promises by calling the method getPromise. We then use the static method Promise.race which will on a given array of Promise objects return the quickest result. This is in behavior similar to the .WaitAny method in C# Task Parallel Library (TPL) for the happy .Net coders out there.
Moving on, we use the .then method on the Promise.race object (which is a Promise itself) and we use Jasmin's expect method (Similar to Assert in NUnit) and expect that the quickest method "won" the race, since it was the function with the shortest delay passed into the method getPromise and its call to setTimout.
The Promise object in ES6 will be further built upon in ES2017. Here, the await keywords will be added and make Javascript functional asynchronous programming more syntax-like and operational/behavior like much of that in .Net.
Most important, Promises in ES6 makes asynchronous programming and its necessary passing of callbacks and error catching much easier by allowing the programmer to chain multiple asynchronous operations and build asynchronous APIs. Multiple Promises can be passed in, chaining multiple Promises and "paths" of asynchronous operations and multiple async operations can be catched in a single or multiple common error handler with the .catch for error handling and the .then for the chained success function.
You can experiment yourself with the code above using Traceur and Jasmin. I have included a Plunk at the following url:
ES 6 Promises Plunk sample code Important - Note that inside an asynchronous operation we must signal that the async operation is completed. We use the resolve method or static Promise.resolve method to do that. We can also reject the success of the async operation by using the reject method or static Promise.rejec.
The call to done(); is because we use Jasmin as previously described and to support async operations inside a Jasmin TDD spec.
Let us also look at another type of Promises, chaining multiple Promises. We use the Promise.resolve method to build up Promises.