Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Angular $q,promises and deferred.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.25k
    Comment on it

    Promises are logics that are executed after any function is completed.  In AngularJS, promises are provided by the in-built $q service. It executes asynchronous functions by registering them with the promise object.  

    Deferred helps to control how and when those promise logics will execute. A promise is resolved or not, is associated with a deferred object. It is contracted using the $q.deferred() function. It exposes 3 methods:-

    a. resolve()
    b.reject()
    c.notify()

    Simple syntax example-

    var deferred = $q.defer(); // deferred contains the promise to be returned
       deferred.resolve(data); // to resolve (fulfill) a promise use .resolve
       deferred.reject(error); // to reject a promise use .reject

    Process of using it -
        •    Step 1:- Inject the “$q” service of Angular.
        •    Step 2 :- Get deferred object from “q” service object.
        •    Step 3 :- Get Promise object from deferred object.
        •    Step 4 :- Add logics to the promise object.

    For example:-

    We are using promise in AngularJS service-

    mainApp.service(exampleservice, function ($http, $q) {
     
        var deferred = $q.defer();
         this.getInfo= function () {
            return $http.get(.url.)
                .then(function (response) {
                    // promise is fulfilled
                    deferred.resolve(response.data);
                    // promise is returned
                    return deferred.promise;
                }, function (response) {
                    // the following line rejects the promise
                    deferred.reject(response);
                    // promise is returned
                    return deferred.promise;
                })
            ;
        };
    });


    Now, the Controller in AngularJS will use this service and displays the result if the promise is fulfilled or display an error message indicating some error in retrieving the data(response). We use the then() method where callback functions are attached as parameters for resolve and reject functions.
     

    mainApp.controller("promiseController", function ($scope, $q, exampleservice) {
         exampleservice.getInfo()
            .then(
                function (result) {
                    // promise was fullfilled
                    // checks for information will be peformed here
                    $scope.info = result;
                },
                function (error) {
                    // handle errors here
                    console.log(error.statusText);
                }
            );
    });
    
    

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: