CODEWITHSUNDEEP
javascriptreactjsasynchronousreact-nativeasync-await
Tan
Tan

Reputation: 43

Pause execution of code until Asynchronous function returns the desired value

While I am waiting to receive a response on whether or not I should skip the intro, it runs the if statement with the value I set at the beginning. Below is the code:

componentWillMount(){
    console.log("Intro component will mount:");
    let skipIntro = false;
    this.checkSkipIntro()
        .then((response)=>{
            skipIntro=response;
            console.log("skipIntro is inside Async: " + skipIntro);
    });
    console.log("skipIntro is: " + skipIntro);
    if(skipIntro){
        console.log("skipping Intro");
        Actions.login();
    }
}
async checkSkipIntro() {
    let skipIntro = await AsyncStorage.getItem("skipIntro");
    console.log("Skip Intro: " + skipIntro);
    if (skipIntro === "yes"){
        console.log("returning True");
        return true;
    }
    else{
        console.log("returning False");
        return false;
    }
}

The log prints out:

Intro.js:9 Intro component will mount:
Intro.js:16 skipIntro is: false
Intro.js:37 Skip Intro: yes
Intro.js:39 returning True
Intro.js:14 skipIntro is inside Async: true

If you notice in the debugger, the console.log("skipIntro is: " + skipIntro); at Intro.js:16 runs before the console.log("skipIntro is inside Async: " + skipIntro); at Intro.js:14. I am unsure at how to pause the execution of the code until the function returns the appropriate values.

I expect the log to output:

Intro.js:9 Intro component will mount:
Intro.js:14 skipIntro is inside Async: true
Intro.js:37 Skip Intro: yes
Intro.js:39 returning True
Intro.js:16 skipIntro is: true

Upvotes: 2

Views: 1903

Answers (1)

ArchNoob
ArchNoob

Reputation: 4126

To pause until the response comes you need to shift your code to inside the callback method or the .then method inside a promise.

Change this ...

componentWillMount(){
    console.log("Intro component will mount:");
    let skipIntro = false;
    this.checkSkipIntro()
        .then((response)=>{
            skipIntro=response;
            console.log("skipIntro is inside Async: " + skipIntro);
    });
    console.log("skipIntro is: " + skipIntro);
    if(skipIntro){
        console.log("skipping Intro");
        Actions.login();
    }
}

To this ...

componentWillMount(){
    console.log("Intro component will mount:");
    let skipIntro = false;
    this.checkSkipIntro()
        .then((response)=> {
            skipIntro=response;
            console.log("skipIntro is inside Async: " + skipIntro);
            
            console.log("skipIntro is: " + skipIntro);
            
            if(skipIntro){
                console.log("skipping Intro");
                Actions.login();
            }
    });
}

Cause if you noticed.

This code never runs!

    if(skipIntro){
        console.log("skipping Intro");
        Actions.login();
    }

Because the skipIntro is false when it was ran.

Simple concept is that JavaScript ran everything else when it was still waiting for a promise to be fulfilled.

Then it went back to the .then method when a promise response came.

So if you want to wait for a reponse to navigate/call some other function you do it inside the .then function or callback function.

Upvotes: 1

Related Questions