asynchronous behavior of functions in typescript

Question

I implemented this snippet of code:

var tmpString = null;
    this.restProvider.validateUser(this.registerCredentials.email, this.registerCredentials.password)
      .then(data => {
        tmpString = JSON.stringify(data);
      });
    console.log(tmpString);

But, despite data is not null, console print a null value and tmpString is set to the right value after a short time. How I can solve that problem? Thanks

The real function is:

registerNewUser()
  {
    var tmpString = null;
    this.restProvider.validateUser(this.registerCredentials.email, this.registerCredentials.password)
      .then(data => {
        tmpString = JSON.stringify(data);
      });
    console.log(tmpString);
    if(tmpString == "false")
    {
      return false;
    }
    else
    {
      this.registerCredentials.email = JSON.parse(tmpString).email;
      this.registerCredentials.password = JSON.parse(tmpString).password;
      this.email = JSON.parse(tmpString).email;
      this.password = JSON.parse(tmpString).password;
    }
    return this.email + this.password;
  }

and I use it

public login() {
    this.showLoading();
    this.registerNewUser();

    if(this.email == "false" && this.password == "false")
    {
      this.showError("Access Denied");
    }
    else
    {
      this.auth.login(this.registerCredentials);
      this.showError("Access Permit");

    }
}

I resolved doing that

registerNewUser()
  {
    var tmpString = null;
    this.restProvider.validateUser(this.registerCredentials.email, this.registerCredentials.password)
      .then(data => {
        tmpString = JSON.stringify(data);
        if(tmpString == "false")
        {
          this.showError("Access Denied");
        }
        else
        {
          this.registerCredentials.email = JSON.parse(tmpString).email;
          this.registerCredentials.password = JSON.parse(tmpString).password;
          this.email = JSON.parse(tmpString).email;
          this.password = JSON.parse(tmpString).password;

          this.auth.login(this.registerCredentials);
          this.showError("Access Permit");
        }
      });

  }

But is this the right solution?

Well, print it inside the callback passed to then(). That's when data is initialized. You already know that this is related to asynchronism, so you should know that the data will only be available asynchronously, and not synchronously, and thus not immediately after the method has been called. — JB Nizet
– JB Nizet, Commented Jul 31, 2018 at 18:01
Sorry, could you post an example of code? I'm dummies about typescript. Thanks a lot — Benny
– Benny, Commented Jul 31, 2018 at 18:04
This is called asynchronous programming. It has nothing to do with TypeScript. — JasonK
– JasonK, Commented Jul 31, 2018 at 18:06

lealceldeiro · Accepted Answer · 2018-07-31 18:03:33Z

3

Taking into account the below code (commented with line numbers):

var tmpString = null; // 1
this.restProvider.validateUser(this.registerCredentials.email, this.registerCredentials.password)
  .then(data => {
    tmpString = JSON.stringify(data); // 2
  });
console.log(tmpString); // 3

The order of execution is:

line 1
line 3
line 2

That's because when line 3 is reached, the asynchronous request hasn't finished. So in order to print tmpString properly, move the console.log(tmpString); after line 2, inside the callback (when the response arrived), like this:

var tmpString = null; // 1
this.restProvider.validateUser(this.registerCredentials.email, this.registerCredentials.password)
  .then(data => {
    tmpString = JSON.stringify(data); // 2
    console.log(tmpString); // 3
  });

answered Jul 31, 2018 at 18:03

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Benny Over a year ago

Wonderful explanation but "console.log()" is just a debug string. Instead of "console.log()" I have to set a global variables. I'm extending right now my question for how it should be for real

lealceldeiro Over a year ago

@AxeOwl you should move all the logic which depends upon the callback result inside it...BUT... keep in mind code readability, maintainability, scalability, etc. So maybe you want to refactor those code blocks inside smaller functions or any other alternative which fits your needs.

Collectives™ on Stack Overflow

asynchronous behavior of functions in typescript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related