Angular - Promises with call back

Question

I'm learning promises in Angular.

I have this function:

  myFunction(): Promise<any> {
    return new Promise(resolve => {
      resolve(this.cognitoUtil.updateAtributes(this.id, this.userProfileForm));
    });
  }

Inside of the method cognitoUtil.updateAtributes, there are a methods that are called and I have the log console.log("callback") after the methods are executed:

updateAtributes(id: string, user: UserForm) {

const cognitoUser = this.getCurrentUser();
cognitoUser.getSession(function (err, session) {
  if (err) {
    return;
  }
  const attributeList = [];
  const dataName = {
    Name: 'name',
    Value: user.name
  };
  const dataEmail = {
    Name: 'email',
    Value: user.email
  };
  attributeList.push(new CognitoUserAttribute(dataName));
  attributeList.push(new CognitoUserAttribute(dataEmail))
  cognitoUser.updateAttributes(attributeList, function (error, result) {
    if (error) {
      alert(err);
      return;
    }
    console.log("callback");
  });

});
}

The promise is called in this way:

this.myFunction().then(() => console.log('Inside the promise'));

When the promise is called, the log inside the promise appears before the log callback:

Why is it happening that? How can I do to have the log Inside the promise after the log callback.

IMO, it's better to use an `Observable` instead of a `Promise`. See this post for more info: https://stackoverflow.com/questions/37364973/promise-vs-observable — Edric, Oct 06 '18 at 05:32
A promise feels like a more natural approach to OPs use case. But this is off-topic in relation to his question. — Jota.Toledo, Oct 06 '18 at 08:46

score 0 · Answer 1 · answered Oct 06 '18 at 05:31

It's hard to tell without being able to run the code, The only thing I can see is that your

console.log("callback")

will not be run immediately, it is just being passed into

cognitoUser.updateAttributes(attributeList, function (error, result) {

which is run within the function passed into

cognitoUser.getSession(function (err, session) {

somehow that must be running that function async and not waiting for the .then()

take for example a callback such as

.click(function() { console.log('click') });

which would never show up until the element was clicked.

Trident D'Gao · Accepted Answer · 2018-10-06T05:49:05.457

your promise is resolved immediately, the code inside the Promise constructor is synchronous (there is no waiting in there, nothing to be postponed)

this is why you get your promise immediately resolved at the same moment when you call it

there is no need for promise there in the first place, just do what you do without a promise and you will get it straight

UPDATE: it looks like updateAttributes is calling its callback at a random time which is way after callback of then

if you want to get it straight you need to wrap your call to updateAttributes into a promise:

myFunction(): Promise<any> {
    return wrappedUpdateAttributes(this.id, this.userProfileForm);
}

function wrappedUpdateAttributes(id, cognitoUser) {
   // ...
   return new Promise(resolved => {
      cognitoUser.updateAttributes(attributeList, function (error, result) {
          // ...
          resolve(undefined);
      })
   });

}

this.myFunction().then(() => console.log('Inside the promise')); // <-- should work

Thanks for your answer @Aleksey Bykov! So, to verify that I understood well. the "then" method of the Promise is executed after the Promise call the method resolve()? — AleGallagher, Oct 06 '18 at 06:06

Angular - Promises with call back

2 Answers2