Вызов функции с ключевым словом await в конструкторе?

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, которая имеет ключевое слово await в конструкторе, значит ли это, что выполнение конструктора будет ожидать разрешения обещания?

Answer 1

Нет, не будет.Чтобы убедиться, что Promise разрешен до тех пор, пока конструктор не вернет значение, вы должны вернуть Promise из конструктора и дождаться его.

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 2

То, что вы используете, это response-nagivation , а AuthLoader - это «компонент загрузчика коммутатора», который использует SwitchStackNavigator .Это экран, на котором вы хотите потратить как можно больше времени немного .

Почему?Ну, потому что нет контента для показа, кроме неопределенного индикатора выполнения.Вот почему в конструкторе вызывается асинхронность начальной загрузки.

выполнение конструктора будет ожидать разрешения обещания?

Нет, не будет.Идея с загрузчиком коммутатора состоит в том, чтобы загрузить текущее состояние вашего приложения и перенаправить (он же switch) на правильный маршрут.

Вот почему не имеет значения, смонтирован ли экран или нет, и именно поэтому bootstrapAsync вызывается в конструкторе, поскольку это самый ранний способ его вызова.

Answer 3

Это не будет ждать, потому что функция конструктора не является асинхронной функцией, и у вас нет ожидания перед вызовом функции.

Чтобы дождаться завершения функции, чтобы выполнить ваш код,вам нужно будет использовать .then().

Answer 4

Я думаю, вам следует переместить метод this._bootstrapAsync() с constructor на componentDidMount() метод жизненного круга.

Кроме того, существует много способов авторизации пользователя. Лучшей практикой является создание маршрутизации.компонент для частного маршрута. Пример