调用在构造函数中等待关键字的函数

Question

class AuthLoadingScreen extends React.Component {
  constructor(props) {
    super(props);
    this._bootstrapAsync();
  }
  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');
    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };
  // Render any loading content that you like here
  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

我知道等待执行，直到承诺决心为止。在这里，我们在构造函数中调用具有等待关键字的bootstrapasync函数，这是否意味着构造函数执行将等到承诺解决？

Answer 1

您正在使用的是反应 - 纳吉，而AuthLoader是使用SwitchStackNavigator的"开关加载程序组件"。这是一个屏幕，您想在其中花费 Little 时间。

为什么？好吧，因为除了不确定的进度栏外，没有内容可显示。这就是在构造函数中调用Bootstrap异步的原因。

构造函数执行将等到承诺解决？

不，不会。开关加载程序的想法是将应用程序的当前状态和重定向（又称switch）加载到正确的路由。

这就是为什么屏幕是否安装的原因，这就是为什么在构造函数中调用bootstrapasync的原因，因为这是最早的称为。

Answer 2

它不会等待，因为构造函数函数不是异步函数，并且在函数调用之前没有等待。

要等到函数结束直到执行代码，您将需要使用.then()。

Answer 3

不，它不会。为了确保承诺已解决，直到构造函数返回值，您实际上应该从构造函数中返回承诺并等待它。

class AuthLoadingScreen extends React.Component {
    // async can't be used with constructor, so we just return Promise
    constructor(props) {
        super(props);
        return new Promise(resolve => {
            _bootstrapAsync().then(() => resolve(this))
        })
    }
    // Fetch the token from storage then navigate to our appropriate place
    // async function returns Promise
    _bootstrapAsync = async () => {
       const userToken = await AsyncStorage.getItem('userToken');
       // This will switch to the App screen or Auth screen and this loading
       // screen will be unmounted and thrown away.
       this.props.navigation.navigate(userToken ? 'App' : 'Auth');
    };
    // Render any loading content that you like here
    render() {
        return (
            <View>
                <ActivityIndicator />
                <StatusBar barStyle="default" />
            </View>
        );
    }
}
// construct the object in async function
const instance = await new AuthLoadingScreen()

确保它在这里工作是一个示例：

(async () => {
    class foo {
        constructor() {
            console.log(2)
            return new Promise(resolve => resolve(this)).then(() => console.log(3))
        }
    }
    console.log(1)
    const b = await new foo()
    console.log(4)
})()

1 2 3 4是输出

Answer 4

我认为您应该将this._bootstrapAsync()方法从constructor移动到componentDidMount() Life-Circle方法。

此外，有很多方法可以授权用户。最佳实践是为私人路线创建路由组件。示例