Как добавить async/await метод в класс es6?

Question

[Николай Антонов]

Пробую добавить async метод в класс es6, который будет делать асинхронный запрос. И я потом хочу вызвать тот метод в другом методе. Но к сожалению не работает:

class AwesomeProject extends Component {
    
async getMoviesFromApi() {
    try {
      let response = await fetch('http://facebook.github.io/react-native/movies.json');
      let responseJson = await response.json();
      return responseJson.movies;
    } catch(error) {
      console.error(error);
    }
  }

render() {
   let result = this.getMoviesFromApi(); // не работает
}

}

В методе render пробую вызвать асинхронный метод. Как правильно сделать?

Comments

[napa3um]

React выполняет рендеринг синхронно, асинхронные операции должны менять стейт компонента, а не в рендере выполняться (а рендер производится при изменении стейта компонента).

[Николай Антонов]

napa3um: А если не не в контексте в реакта смотреть пример?

[napa3um]

Николай Антонов: да в любом фреймворке рендеринг синхронный.

Answer 1

[webzepter]

class AwesomeProject extends Component {
  state = {
      movies: []
  };

  componentWillMount() {
    setTimeout(updateMovies, 2000);
  }

  @autobind
  async updateMovies() {
    const movies = await this.getMoviesFromApi();
    this.setState({...this.state, movies});
  }

  async getMoviesFromApi() {
    const response = await fetch('http://facebook.github.io/react-native/movies.json');
    const responseJson = await response.json();
    return responseJson.movies;
  }

  render() {
     return this.state.movies.map(movie => <Movie name={movie.name}/>);
  }
}