How to make synchronous call in Angular JS?

Question

The following code supposed to be update username in the data base then retrieve updated username. updateUserMame and getUserName are two different REST calls.

updateName(name) {
    var obj = this;
    if (name === 'None') {
      name = null;
    }
    obj.UtilityService.updateUserName(name, obj.userId)
      .success(function (data) {
        if (data) {
          obj.getUserName(obj.userId);
          console.log('Name is updated for ID:'||obj.userId);
        } else {
           console.log('Something Wrong');
        }
      });
  }
  
getUserName(userId){
  obj.UtilityService.getUserName(userId)
        .then(function (result) {
          console.log(result.user.userId);
          }
}

I have user name 'Nathan Drake' in the dataBase. When I run the update function with 'Elena Fisher', it is returning 'Nathan Drake'.

I've read some articles to make synchronus service calls, but unable to figure out what is going wrong.

Please help.

Do not make synchronous calls, they are deprecated http://stackoverflow.com/questions/11448011/jquery-ajax-methods-async-option-deprecated-what-now — Ruan Mendes, Feb 22 '16 at 17:38
Nobody does this and browsers don't allow this behaviour because of the impact on user experience (freezing the page). — , Feb 22 '16 at 17:39
Synchronous calls is like beeing unable to breath and walk at the same time — Sarantis Tofas, Feb 22 '16 at 18:36

sjokkogutten · Answer 1 · 2016-02-22T18:50:15.887

You could wrap your update function in a promise:

var updatePromise = $q.when(updateName(name)); // creates a promise

When your promise has finished processing, you can resolve it using then() which takes a success callback and an error callback

updatePromise().then(function successCallback(response){  // resolves the promise using then
  getUserName(userId) // execute the rest of your code
},
function errorCallback(response){
  console.log(error)
});

You would need to inject $q into the scope you are working with

score 0 · Answer 2 · answered Feb 22 '16 at 18:51

Your code does not make much sense, that is I see possible mistakes as it looks like you are interchanging user name and user id and calling the obj context from inside a function even when its not declared there etc. Either we are missing code or this will fail when you try to run it.

Here is your example with some fixes and comments that show how you could do it using callbacks (no sync code, as mentioned by everyone else on this thread you should avoid actually waiting for I/O and use callbacks instead).

updateName(name) {
    var obj = this; // good, you captured this
    if (name === 'None') {
      name = null;
    }
    obj.UtilityService.updateUserName(name, obj.userId)
      .success(function (data) {
        if (data) {
        // ok, you successfully updated the name so why would you go back to the server and get it again? You know the value based on your update.
          console.log('Name is updated for ID:' + obj.userId.toString());

          // for your example though here is how you could handle it
          obj.getUserName(obj, obj.userId, function(user){ // i assumed the name is stored in variable userName
              console.log('Name from server = ' + user.userName); // no idea what you are returning but you can figure it out from here
              // maybe you also want to capture it again??
              obj.name = user.userName;
          });

        } else {
           console.log('Something Wrong');
        }
      });
  }

// pass in captured this as obj, the user id, and a callback
getUserName(obj, userId, callback){
  obj.UtilityService.getUserName(userId)
        .then(function (result) {
          callback(result); // call the callback with the result. The caller can then do something with it
      }
}

How to make synchronous call in Angular JS?

2 Answers2