Загрузка асинхронных данных в компонент React - PullRequest
Новая
       21

Загрузка асинхронных данных в компонент React

1 голос
/ 11 марта 2019

Мне нужно асинхронно загрузить внешние данные в мой компонент React. В документации приведен следующий пример кода. 

// After
class ExampleComponent extends React.Component {
  state = {
    externalData: null,
  };

  componentDidMount() {
    this._asyncRequest = loadMyAsyncData().then(
      externalData => {
        this._asyncRequest = null;
        this.setState({externalData});
      }
    );
  }

  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }
}

Но как может выглядеть loadMyAsyncData(), чтобы сделать его "жизнеспособным"? Я предположил бы, что это могло бы использовать async/await?

Может ли кто-нибудь привести пример?

1 Ответ

1 голос
/ 11 марта 2019

Чтобы быть "thenable" loadMyAsyncData должен возвращать Promise.

Вот пример loadMyAsyncData, возвращающий обещание и использующий setTimeout для задержки разрешения обещания через 1 секунду 

const loadMyAsyncData = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve({
    example: "value"
  }), 1000)
})

Вы можете использовать код выше this._asyncRequest = loadMyAsyncData().then( ..... ) или использовать вместо него async / await 

async componentDidMount() {
  this._asyncRequest = loadMyAsyncData()
  const externalData = await this._asyncRequest;
  this._asyncRequest = null;
  this.setState({externalData});
}

пример кода и коробки

...