Your Own Promise

If all you want to do is use asynchronous methods then you don't need to know how to construct a function that returns a promise object of your own. In fact, unless you want to wrap some existing asynchronous functions then it is difficult to see why you would want to as your function doesn't give up the UI thread and so it can't return until it is finished.

The only way you have of freeing the UI thread is either to use the setTimout method to suspend your function, free the UI thread and then call it again in a few seconds, or to go the whole hog and implement web workers. Web Workers and promises are covered in the next chapter.

To provide a simple example, let's use a timer to free the UI thread. Consider the following:

function mySlowFunction() {
        var done = false;
        setTimeout(function () {
            console.log("poll");
            done=true;
        }, 10000);
        return done;
     };

Notice that the setTimeout calls the anonymous function after ten seconds and mySlowFunction returns at once - hence it doesn't block the UI thread. However, if the anonymous function took a long time it would block the UI as it is run using the UI thread - there is no new thread involved in this example. Also notice that the value returned as the result is set to false and not the result that occurs when the entire task is done, i.e. true. To return the final result we would need to setup a callback mechanism.

Instead let's augment the function so that it returns a promise.  When you create a promise object you have to provide a function that takes three function parameters - complete, error and progress. These correspond to the functions that are specified when you call the then or done methods. In our simple example it is only worth implementing the complete functions.

The new function looks a little more complicated:

function mySlowFunction() {
 var mypromise=new WinJS.Promise(
      function(complete,error,progress){    
            var done = false;
            setTimeout(function () {
                 console.log("poll");
                 done = true;
                 complete(done);
            }, 10000);
        });
        return mypromise;
     };

First we create a promise object with the function that accepts the three other functions as parameters. The rest of the body of the function is more or less what we had in mySlowFunction before. The anonymous function is called after 10 seconds and mySlowFunction returns at once. Notice however that within the anonymous function we call the complete function with the done as a parameter - this is the value that is supplied to the onComplete function in the then method.  Also notice that now instead of the supposed result value i.e. done we return the promise object.

With these changes you can now call mySlowFunction as:

mySlowFunction().then(
 function(value){console.log(value)}); 

Now when you run the program you will see the value true displayed after 10 seconds.

Of course in a real example you would have to implement calling the error function if something went wrong and optionally the progress function at regular intervals. To make this worth while you probably need to implement a worker thread.

Conclusion

If you are programing in WinJS, you can't avoid asynchronous methods and hence promises. Using them correctly, especially when you are working with file systems or downloads, can speed up your app and make it seem responsive at all times.

 Creating JavaScript/HTML5 Metro Applications

• Chapter 1 Getting Started With Metro JavaScript
• Chapter 2 WinControls
• Chapter 3 The App Bar
• Chapter 4 Templates & Data Binding
• Chapter 5 Working with Tiles - Badges
• Chapter 6 Working with Tiles - Notifications
• Chapter 7 Toast Notification
• Chapter 8 Custom Controls
• Chapter 9 Promises
• Chapter 10 Web Workers & Promises
• Chapter 11 Data Binding
• Chapter 12 Life Cycle

StillStill to come, chapters on Web Worksers, Life Cycle and Data Binding.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.