Using AngularJS to make asynchronous calls to hprose.httpclient

Question

Using AngularJS to make asynchronous calls to hprose.httpclient

I am currently facing an issue with my Hprose server and user authentication. My goal is to create a logonService that will return a UserInfo object after the user has successfully logged in. The problem lies in the asynchronous nature of hprose.HttpClient.login() method, which takes seconds to complete. The code within the controller continues executing immediately after creating the logonService instance, resulting in $scope.user always being null and logonService.logon() never being called. I attempted to use $http.get instead, but I couldn't find a way to obtain a Promise object using Hprose. Despite searching on Google for solutions, I have been unable to find anything useful. Does anyone have any ideas on how to resolve this issue? Your help is greatly appreciated.

var app = angular.module("myApp",[])
  .service("logonService", function() {
     var httpclient = new hprose.HttpClient("http://testurl.com:4800/webapi/", ["login"]);
     httpclient.login("userid", "ppt", function(sid) {
        console.log("sid1="+sid);
     }
     this.logon = function() {
        console.log("here I am");
        return something;
     }
    })
   .controller（"myCtrl", ["logonService", function(logonService) {
       var user = logonService.logon();
       $scope.user = user;
   }
)

javascript angularjs asynchronous promise angular-promise

Answer 1

Answer №1

One issue lies in the fact that the code within myCtrl does not wait for the asynchronous result of logonService.logon(). Additionally, there is uncertainty regarding whether httpclient.login() returns promises. Therefore, it is essential to encapsulate it within a $q promise.

var app = angular.module("myApp",[])

app.service("logonService", function() {
    var loginURL = "http://testurl.com:4800/webapi/";
    var httpclient = new hprose.HttpClient(loginUrl, ["login"]);

    // wrap login function with a new $q promise
    this.logon = function(userid, ppt) {
        return $q(function(resolve,reject){ 
            httpclient.login(userid, ppt, function(sid) {
                console.log("sid1="+sid);
                // determine resolve or reject based on callback results
                if (sid) {
                resolve(sid);
                } else {
                reject('sid wasn\'t defined!');
                }
            })
        }
    }

})

app.controller（"myCtrl", ["logonService", 
    function(logonService) {
        logonService.logon(userid, ppt).then(function(user){
            // assign user to scope only after promise is resolved
            // 'user' argument will be whatever was passed to 'resolve' above
            $scope.user = user; 
        })
        .catch(function(e){
            console.log('An Error occurred: ' + e)
            // handle scenarios like logon server being down, etc.
        })
    }
])

Here is a helpful resource for understanding AngularJS' $q. It provides guidance on creating Promises in various situations.

I trust that this information proves beneficial to you.

Answer 2

One issue lies in the fact that the code within myCtrl does not wait for the asynchronous result of logonService.logon(). Additionally, there is uncertainty regarding whether httpclient.login() returns promises. Therefore, it is essential to encapsulate it within a $q promise.

var app = angular.module("myApp",[])

app.service("logonService", function() {
    var loginURL = "http://testurl.com:4800/webapi/";
    var httpclient = new hprose.HttpClient(loginUrl, ["login"]);

    // wrap login function with a new $q promise
    this.logon = function(userid, ppt) {
        return $q(function(resolve,reject){ 
            httpclient.login(userid, ppt, function(sid) {
                console.log("sid1="+sid);
                // determine resolve or reject based on callback results
                if (sid) {
                resolve(sid);
                } else {
                reject('sid wasn\'t defined!');
                }
            })
        }
    }

})

app.controller（"myCtrl", ["logonService", 
    function(logonService) {
        logonService.logon(userid, ppt).then(function(user){
            // assign user to scope only after promise is resolved
            // 'user' argument will be whatever was passed to 'resolve' above
            $scope.user = user; 
        })
        .catch(function(e){
            console.log('An Error occurred: ' + e)
            // handle scenarios like logon server being down, etc.
        })
    }
])

Here is a helpful resource for understanding AngularJS' $q. It provides guidance on creating Promises in various situations.

I trust that this information proves beneficial to you.

Answer 3

Answer №2

var application = angular.module("myApp",[])

application.service("logonService", function() {
    var loginEndpoint = "http://testurl.com:4800/webapi/";
    var httpclient = new hprose.HttpClient(loginEndpoint, ["login"]);

    this.logonUser = function(userId, password) {
        // The result of httpclient.login is already a promise object.
        return httpclient.login(userId, password);
    }
})

application.controller("myCtrl", ["logonService", 
    function(logonService) {
        logonService.logonUser(userId, password).then(function(currentUser){
            // Assign currentUser to scope only after the promise resolved
            // 'currentUser' argument will hold whatever was passed to 'resolve' above
            $scope.currentUser = currentUser; 
        })
        .catch(function(error){
            console.log('An Error occurred: ' + error)
            // Logon server may have been down or other issues
        })
    }
])

The outcome of httpclient.login is already a promise object, eliminating the need to utilize $q for wrapping it.

Answer 4

var application = angular.module("myApp",[])

application.service("logonService", function() {
    var loginEndpoint = "http://testurl.com:4800/webapi/";
    var httpclient = new hprose.HttpClient(loginEndpoint, ["login"]);

    this.logonUser = function(userId, password) {
        // The result of httpclient.login is already a promise object.
        return httpclient.login(userId, password);
    }
})

application.controller("myCtrl", ["logonService", 
    function(logonService) {
        logonService.logonUser(userId, password).then(function(currentUser){
            // Assign currentUser to scope only after the promise resolved
            // 'currentUser' argument will hold whatever was passed to 'resolve' above
            $scope.currentUser = currentUser; 
        })
        .catch(function(error){
            console.log('An Error occurred: ' + error)
            // Logon server may have been down or other issues
        })
    }
])

The outcome of httpclient.login is already a promise object, eliminating the need to utilize $q for wrapping it.

Using AngularJS to make asynchronous calls to hprose.httpclient

Answer №1

Answer №2

Similar questions

Bootstrap is having trouble displaying the collapsed menu due to the abundance of content on the page

Implement ajax functionality to update an object within a JSP page

Problem arises with chai-http middleware when employing dynamic imports in chai 5.1.1 version

Using Angular's ng-style directive to apply various styles based on multiple conditions and attributes

the angular variable scope has not been defined

Generate a smaller set of information by choosing specific columns within a two-dimensional JavaScript array

The overlay background is being obscured by surrounding elements

Is it possible to request a GET on a server's JSON file using a specific key?

What is the best way to retrieve the nearest form data with jQuery after a child input has been modified?

Is there a way to categorize items by their name in JavaScript?

Implementing a function to load HTML pages upon clicking a button with JavaScript

Unable to achieve the expected results following a MongoDB query

Produce an additional page while remaining on the present one

Guide to managing items in a list using Ionic

The CLI feature is not compatible with NextJS Drizzle-Kit

Exploring the Evolution of jsAjaxForm from jQuery Version 2.1.3 to Version 3.2.1

Angular throws an error when trying to parse undefined data outside of an async function

Encountered an unknown getter error in Vuex while using Vue/Nuxt/Vuex with server-side rendering enabled

AJAX Communication Issue: Data not transferring from client-side to backend in C# MVC 5 via HTTP

"Utilize jQuery AJAX Promises to Trigger Custom Exceptions that can be Handled by the Outer fail() Function