The JavaScript promises are one of the hardest subjects to learn from javascript. It is not the intent of this post to explain in deed what a promise is, we just gonna touch the basics, and see some examples of how to create our own promises with JQuery, AngularJs and Protractor
Topics:
- Briefly explain what promises are
- Promise examples
- JQuery promise example
- AngularJs/$q promise example
- Protractor promise example
- Working example in jsFiddle
What is a promise
A promise represents the eventual result of an asynchronous operation like a network call or a setTimeout function. It is a placeholder into which the successful result value or failure will materialize in a differed call.
Why Use Promises?
Promises provide a simpler alternative for executing, composing, and managing asynchronous operations when compared to traditional callback-based approaches. They also allow you to handle asynchronous errors using approaches that are similar to synchronous try/catch.
Example of using the Promises
Here is a simple “hello world” program that synchronously obtains and logs a greeting.
var greeting = sayHello(); console.log(greeting); // 'hello world’;
This code will be executed imperatively right after the asignation, it will excecute the console.log statement.
However, if sayHello is asynchronous and needs to look up the current greeting from a web service through the network for example, it may return a promise, and the code execution flow will continuing in parallel until the promise returns:
var greetingPromise = sayHelloAsync(); greetingPromise.then(function (greeting) { console.log(greeting); // 'hello world’ //deferred response }); console.log(“This statement will be excecuted before the then() callback”)
Examples:
JQuery example (see working example):
To illustrate this example we going to use setTimeout to simulate the delay in an asynchronous call.
//JQuery promise function sayHelloAsync() { var deferred = $.Deferred(); //the setTimeout will deffered the excecution of this function, and simulate how a network call works setTimeout(function() { deferred.resolve('Hello Word');//here we resolve the promise }, 5000); return deferred.promise(); } var greetingPromise = sayHelloAsync(); greetingPromise.then(function(greetings){ console.log(greetings) }); console.log(“This statement will be excecuted before the then() callback”)
Angular $q example: Taken from the AngularJs documentation
function asyncGreet(name) { var deferred = $q.defer(); setTimeout(function() { deferred.notify('About to greet ' + name + '.'); if (okToGreet(name)) { deferred.resolve('Hello, ' + name + '!'); } else { deferred.reject('Greeting ' + name + ' is not allowed.'); } }, 1000); return deferred.promise; } var promise = asyncGreet('Robin Hood'); promise.then(function(greeting) { alert('Success: ' + greeting); }, function(reason) { alert('Failed: ' + reason); }, function(update) { alert('Got notification: ' + update); });
Protractor syntax example:
function sayHelloAsync() { var deferred = protractor.promise.defer(); setTimeout(function() { deferred.fulfill('Hello Word');//here we resolve the promise }, 5000); return deferred.promise; }