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

Question

当我等待收到关于是否应该跳过介绍的响应时，它会使用我在开始时设置的值运行 if 语句。下面是代码:

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;
    }
}

日志打印出来:

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

如果您在调试器中注意到，console.log("skipIntro is: "+skipIntro); at Intro.js:16 在 console.log("skipIntro is inside Async: "+skipIntro); 之前运行 在 Intro.js:14。我不确定如何暂停代码的执行，直到函数返回适当的值。

我期望日志输出:

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

要暂停直到响应到来，您需要将代码转移到回调方法内或 promise 内的 .then 方法中。

改变这个...

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();
    }
}

对此...

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();
            }
    });
}

因为如果你注意到了。

此代码永远不会运行!

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

因为skipIntro在运行时是假的。

简单的概念是 JavaScript 在等待 promise 履行时运行其他所有事情。

然后，当 Promise 响应到来时，它返回到 .then 方法。

因此，如果您想等待响应来导航/调用其他函数，您可以在 .then 函数或回调函数中执行此操作。