Jsdefferedlogo

A few JavaScript libraries are born to change your work for the better. They may beget in hours of code becoming more enjoyable and more beautifully written. There is one in particular I have come to enjoyed for the last year and half, this one is JSDeffered. Probs go to @cho45 for this awesome! work.

JSDeffered is a JavaScript Asynchronous Library that is very intuitive and easy to use. The vision here is to eliminate – the awfully and maze looking – nested callback pattern; and implemented a more flatten approach.

Nested Ajax Call Back – The old way

olway

Nested AJAX with JSDeffered – The new way

newway

My JSDeffered Example

JSDeffered is more than just a library that enables for a more sequential-looking Ajax calls. JSDeffered library is very rich; among my favorite features, it provide us with the ability to make parallel AJAX calls hassle free. To briefly illustrate JSDeffered, I have create a simple example that utilize an AngularJS Service to make an array of calls.

View Plunker Example

 

Here is the specific of the example written in TypeScript.

  • An AngularJS Service takes an Array of Request or Urls to perform
  • The Url consist of CORS Yahoo API requests.
  • The AngularJS service exposes two methods that return a promise – One for a Sequential Call, and for a Parallel Call
  • The Request array and the Result array have been strongly typed.

Strongly Type JS Classes

   1: class AJXITEM {
   2:        constructor(public name: string, public url: string) { }
   3:    }
   4:    class AJXRESULT {
   5:        constructor(public name: string, public result: any) { }
   6:    }

Angular Service

   1: export class DataGetService {
   2:         private _deffered: any;
   3:         constructor($q : ng.IQService) {
   4:             this._deffered = $q.defer();
   5:             Deferred.define();
   6:         }
   7:

Sequential Method

   1: ExecuteSequential(array: AJXITEM[]) {
   2:     var deffered = this._deffered;
   3:     var results: AJXRESULT[] = [];
   4:     loop(array.length, function (index) {
   5:         return $.getJSON(array[index].url, function (data) {
   6:             var resultitem = new AJXRESULT(array[index].name, data);
   7:             results.push(resultitem);
   8:         });
   9:     }).next(function () {
  10:         deffered.resolve(results);
  11:     });
  12:     return deffered.promise;
  13: }

Parallel Method

   1: // This parallel method will only return the urls array protions to be passed to the
   2: // parallel method of the ajax call
   3: private _parallels = function (array :AJXITEM[]) {
   4:     var requestsAjaxs: any[] = [];
   5:     var urls = Enumerable.From(array)
   6:         .Select(x => x.url).ToArray();
   7:     urls.forEach(function (value, index) {
   8:         requestsAjaxs.push($.getJSON(value));
   9:     });
  10:  
  11:     console.log(urls);
  12:  
  13:     return requestsAjaxs;
  14:  
  15: }
  16: ExecuteParallel(array: AJXITEM[]) {
  17:    var deffered = this._deffered;
  18:    var results: AJXRESULT[] = [];
  19:    parallel(this._parallels(array)).next(function (values: any[]) {
  20:        values.forEach(function (value, index) {
  21:            var resultitem = new AJXRESULT(array[index].name, value);
  22:            results.push(resultitem);
  23:        });
  24:        deffered.resolve(results);
  25:    });
  26:  
  27:    return deffered.promise;
  28: }

The Angular View

In the example created 3 AJAX Yahoo API request were made from the controller, with  weather data of 3 cities. The cities are then rendered with their 5 days forecast exposed by the API. Below is a view of one city.

cityview

View Code In Plunker