暂停执行代码，直到异步函数返回所需值

Question

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

Answer 1

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.