Асинхронная обработка — JS: React

Работа с асинхронным кодом в React не отличается ничем особо примечательным по сравнению с тем, что ранее рассматривалось в курсe "Асинхронное программирование", но для проформы стоит пробежаться.

class Loader extends React.Component {
  constructor(props) {
    super(props);
    this.state = { url: null };
  }

  handleClick = async () => {
    const res = await axios.get('/images/random');
    this.setState({ url: res.data });
  }

  render() {
    const { url } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>Load Random Image</button>
        {url && <img src={url} />}
      </div>
    );
  }
}

Выше видно, обработчик можно легко сделать асинхронным, а дальше все как обычно.

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар «Как самостоятельно учиться»