Using Conditions in AngularJS: Choosing Between Callbacks and Promises in a Service

Question

Using Conditions in AngularJS: Choosing Between Callbacks and Promises in a Service

I am currently faced with a specific scenario where I am uncertain whether to implement a callback or a promise. As someone who is relatively new to promises and just beginning to grasp their concept, I want to avoid falling into any potential anti patterns.

I have thoroughly studied the Angular documentation on $q.

Here is what I aim to achieve:

If using promises :

OauthService.token().then(function(access_token){
    config.url = config.url+'?access_token='+access_token;
});

return config;

If using callback :

OauthService.token(function(access_token){
    config.url = config.url+'?access_token='+access_token;
});

return config;

The Oauth service contains some conditions that make me lean towards using callbacks instead of promises.

Therefore, my service currently utilizes callbacks.

OauthService.js :

app.factory('OauthService', function($http, $localStorage) {

return {
    token : function(callback){

        // Retrieve current token
        access_token = $localStorage.getObject('access_token');
        // Retrieve current identity
        identity_token = $localStorage.getObject('identity_token');

        // If no user is logged in
        if(isObjectEmpty(identity_token)){

            // If access_token does NOT exist OR will expire soon
            if( isObjectEmpty(access_token) || Date.now() > (access_token.expires_at - (600*1000)) ){

                // Create an anonymous access_token
                $http
                    .get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret+'&grant_type=client_credentials')
                    .then(function (response) {

                        $localStorage.setObject('access_token', {
                            key: response.data.access_token,
                            type: 'anonymous',
                            expires_at: Date.now()+(response.data.expires_in*1000)
                        });

                        // return access token here
                        callback(response.data.access_token);

                    });
            }

        }
        // If user is logged in
        else{

            // If access_token does NOT exist OR will expire soon OR is anonymous
            if( isObjectEmpty(access_token) || Date.now() > (access_token.expires_at - (600*1000)) || access_token.type == 'anonymous' ){
                // Create an access_token with an identity
                $http
                    .get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret+'&api_key='+identity_token+'&grant_type=http://oauth2.dev/grants/api_key')
                    .then(function (response) {

                        $localStorage.setObject('access_token', {
                            key: response.data.access_token,
                            type: 'identity',
                            expires_at: Date.now()+(response.data.expires_in*1000)
                        });

                        // return access token here
                        callback(response.data.access_token);

                    });
            }

        }

        // return access token here (if the previous token has not changed type or expired)
        callback(access_token.key);

    }
};

})

If I were to opt for promises, how should I go about implementing that?

javascript angularjs callback angular-promise

Answer 1

Answer №1

When it comes to executing operations, the presence of conditions is unrelated to whether you choose callbacks or promises. Using plain callbacks for asynchronous operations is considered subpar, and leveraging promises whenever possible is recommended.

To enhance your token method with promises, you can implement the following approach:

app.factory('OauthService', function($http, $localStorage, $q) {
    return {
        token : function(callback){

            // Retrieving current token
            access_token = $localStorage.getObject('access_token');
            // Fetching current identity
            identity_token = $localStorage.getObject('identity_token');

            // If no user is logged in
            if(isObjectEmpty(identity_token)){

                // If access_token doesn't exist or is expiring soon
                if( isObjectEmpty(access_token) || 
                    Date.now() > (access_token.expires_at - (600*1000)) ){

                    // Generating an anonymous access_token using a promise
                    return $http
                        .get(domain+'/oauth/v2/token?client_id='+public_id + 
                             '&client_secret=' + secret + '&grant_type=client_credentials')
                        .then(function (response) {
                            $localStorage.setObject('access_token', {
                                key: response.data.access_token,
                                type: 'anonymous',
                                expires_at: Date.now() + 
                                       (response.data.expires_in * 1000)
                            });

                            return response.data.access_token;
                        });
                }
            }

            // If user is logged in
            else {
                // Processing when access_token is missing, about to expire, or is of anonymous type
                if( isObjectEmpty(access_token) || 
                    Date.now() > (access_token.expires_at - (600*1000)) || 
                    access_token.type == 'anonymous' ){

                    // Creating an access_token incorporating identity details through a promise
                    return $http
                        .get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret + 
                             '&api_key='+identity_token+'&grant_type=http://oauth2.dev/grants/api_key')
                        .then(function (response) {
                            $localStorage.setObject('access_token', {
                                key: response.data.access_token,
                                type: 'identity',
                                expires_at: Date.now()+
                                      (response.data.expires_in * 1000)
                            });

                            return response.data.access_token;    
                        });
                }

            }

            // Return existing access token (if previous token remains unchanged in type or hasn't expired)
            return $q.when(access_token.key);    
        }
    };
});

You can streamline the code further by refactoring it as shown below:

app.factory('OauthService', function($http, $localStorage, $q) {
    function expiresSoon(access_token) {
        return Date.now() > (access_token.expires_at - (600*1000));
    }

    function getAccessToken(url, type) {
        return $http
            .get(url)
            .then(function (response) {
                $localStorage.setObject('access_token', {
                    key: response.data.access_token,
                    type: type,
                    expires_at: Date.now() + 
                        (response.data.expires_in * 1000)
            });

                return response.data.access_token;
            });
    }

    return {
        token : function(callback){

            // Retrieve current token
            access_token = $localStorage.getObject('access_token');
            // Retrieve current identity
            identity_token = $localStorage.getObject('identity_token');

            // If no user is logged in
            if(isObjectEmpty(identity_token)){

                // If access_token doesn't exist or is expiring soon
                if( isObjectEmpty(access_token) || expiresSoon(access_token) ) {
                    var url = domain + '/oauth/v2/token?client_id=' + public_id + 
                              '&client_secret=' + secret + '&grant_type=client_credentials';
                    // Create an anonymous access_token using promises
                    return getAccessToken(url, 'anonymous');
                }
            }

            // If user is logged in
            else {
                // Processing when access_token is missing, about to expire, or is of anonymous type
                if( isObjectEmpty(access_token) || 
                    expiresSoon(access_token) || 
                    access_token.type == 'anonymous' ){

                    var url = domain+'/oauth/v2/token?client_id=' + public_id+
                              '&client_secret='+secret + 
                              '&api_key='+identity_token + 
                              '&grant_type=http://oauth2.dev/grants/api_key';

                    // Creating an access_token with identity using promises
                    return getAccessToken(url, 'identity');
                }
            }

            // Return existing access token (if previous token remains unchanged in type or hasn't expired)
            return $q.when(access_token.key);    
        }
    };
});

Answer 2

When it comes to executing operations, the presence of conditions is unrelated to whether you choose callbacks or promises. Using plain callbacks for asynchronous operations is considered subpar, and leveraging promises whenever possible is recommended.

To enhance your token method with promises, you can implement the following approach:

app.factory('OauthService', function($http, $localStorage, $q) {
    return {
        token : function(callback){

            // Retrieving current token
            access_token = $localStorage.getObject('access_token');
            // Fetching current identity
            identity_token = $localStorage.getObject('identity_token');

            // If no user is logged in
            if(isObjectEmpty(identity_token)){

                // If access_token doesn't exist or is expiring soon
                if( isObjectEmpty(access_token) || 
                    Date.now() > (access_token.expires_at - (600*1000)) ){

                    // Generating an anonymous access_token using a promise
                    return $http
                        .get(domain+'/oauth/v2/token?client_id='+public_id + 
                             '&client_secret=' + secret + '&grant_type=client_credentials')
                        .then(function (response) {
                            $localStorage.setObject('access_token', {
                                key: response.data.access_token,
                                type: 'anonymous',
                                expires_at: Date.now() + 
                                       (response.data.expires_in * 1000)
                            });

                            return response.data.access_token;
                        });
                }
            }

            // If user is logged in
            else {
                // Processing when access_token is missing, about to expire, or is of anonymous type
                if( isObjectEmpty(access_token) || 
                    Date.now() > (access_token.expires_at - (600*1000)) || 
                    access_token.type == 'anonymous' ){

                    // Creating an access_token incorporating identity details through a promise
                    return $http
                        .get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret + 
                             '&api_key='+identity_token+'&grant_type=http://oauth2.dev/grants/api_key')
                        .then(function (response) {
                            $localStorage.setObject('access_token', {
                                key: response.data.access_token,
                                type: 'identity',
                                expires_at: Date.now()+
                                      (response.data.expires_in * 1000)
                            });

                            return response.data.access_token;    
                        });
                }

            }

            // Return existing access token (if previous token remains unchanged in type or hasn't expired)
            return $q.when(access_token.key);    
        }
    };
});

You can streamline the code further by refactoring it as shown below:

app.factory('OauthService', function($http, $localStorage, $q) {
    function expiresSoon(access_token) {
        return Date.now() > (access_token.expires_at - (600*1000));
    }

    function getAccessToken(url, type) {
        return $http
            .get(url)
            .then(function (response) {
                $localStorage.setObject('access_token', {
                    key: response.data.access_token,
                    type: type,
                    expires_at: Date.now() + 
                        (response.data.expires_in * 1000)
            });

                return response.data.access_token;
            });
    }

    return {
        token : function(callback){

            // Retrieve current token
            access_token = $localStorage.getObject('access_token');
            // Retrieve current identity
            identity_token = $localStorage.getObject('identity_token');

            // If no user is logged in
            if(isObjectEmpty(identity_token)){

                // If access_token doesn't exist or is expiring soon
                if( isObjectEmpty(access_token) || expiresSoon(access_token) ) {
                    var url = domain + '/oauth/v2/token?client_id=' + public_id + 
                              '&client_secret=' + secret + '&grant_type=client_credentials';
                    // Create an anonymous access_token using promises
                    return getAccessToken(url, 'anonymous');
                }
            }

            // If user is logged in
            else {
                // Processing when access_token is missing, about to expire, or is of anonymous type
                if( isObjectEmpty(access_token) || 
                    expiresSoon(access_token) || 
                    access_token.type == 'anonymous' ){

                    var url = domain+'/oauth/v2/token?client_id=' + public_id+
                              '&client_secret='+secret + 
                              '&api_key='+identity_token + 
                              '&grant_type=http://oauth2.dev/grants/api_key';

                    // Creating an access_token with identity using promises
                    return getAccessToken(url, 'identity');
                }
            }

            // Return existing access token (if previous token remains unchanged in type or hasn't expired)
            return $q.when(access_token.key);    
        }
    };
});

Using Conditions in AngularJS: Choosing Between Callbacks and Promises in a Service

Answer №1

Similar questions

What is the best way to include JSON values for specific keys using JavaScript, jQuery, or AngularJS?

Utilize Javascript to refine JSON data strings

How can I unselect a radio button by double clicking on it?

What is the best way to handle processing large amounts of data stored in a file using JavaScript within the

Issue with updating nested child object reference in Redux state input value

Steps to include a HTML webpage within another page

Unlocking the secrets of capturing key presses before submitting with jQuery

The spread operator in Vuex is causing compilation errors with babel, as it continuously results in a module build failure

Using AngularJS controllers: How can one trigger a controller from within a different controller?

Show search results in real-time as you type

Tips for creating a single div element on a React form

Tips for uploading an image to a .NET Webservice with Ajax on Internet Explorer 8

Why do I keep receiving the error message "Cannot set property of undefined"?

What is the method to obtain the dimensions of the browser window using JavaScript?

Fusion: Combination of Drop-down Menu, Inactive Text Field, and Database Data Retrieval

Using AJAX to retrieve a specific JSON object from an array of JSON data

Executing a CRM javascript button triggers a request to a JSON URL and extracts a specific value

Angular Pagination: Present a collection of pages formatted to the size of A4 paper

Transferring data between two HTML files through the POST method

Help needed with PHP, MYSQL, and AJAX! Trying to figure out how to update a form dynamically without triggering a page refresh. Can anyone