Асинхронные запросы

Нам все еще не нужен redux, ничего подобного.
CRA так устроен, что если вы положите что-нибудь в public директорию, это будет доступно по пути:
1
http://localhost:3000/название-директории/название-файла (но без слова public в пути)
Copied!
Переместим наш json с новостями в src/public/data/newsData.json
Теперь его можно открыть GET-запросом на localhost:3000/data/newsData.json​
news in json
Конечно, при этом у нас сломался импорт в App.js (так как такого файла по старому пути нет):
news failed to compile
Так как у нас есть доступ к файлу через GET-запрос, мы можем запросить его.
"Давайте представим задачу" (c)
У нас есть данные на сервере (новости в json), нам нужно их запросить и отобразить в списке. Пока запрос выполняется, мы хотим показывать юзеру надпись: "Загружаю..." вместо списка новостей, чтобы он не нервничал. Когда новости загружены - мы хотим отобразить их как раньше.
Что нового в этой задаче:
как сделать асинхронный запрос (вопрос не про react) [1];
где делать асинхронный запрос (про react) [2];
[1] - это вопрос про нативный js. Запрос будем делать с помощью fetch.
[2] - запрос за данными следует начать в componentDidMount
Начнем с подготовки "состояния" и шаблона.
src/App.js
1
import React from 'react'
2
import { Add } from './components/Add'
3
import { News } from './components/News'
4
// удален импорт newsData
5
import './App.css'
6
​
7
class App extends React.Component {
8
  state = {
9
    news: null, // было newsData
10
    isLoading: false, // статус для манипуляций "прелоадером" ("Загружаю..." в нашем случае)
11
  }
12
  ...
13
}
14
​
15
export default App
Copied!
В данный момент наше приложение не работает, но мы приготовили несколько важных вещей:
во-первых, мы сможем на основе данных в newsData сказать:
если newsData: null:
если isLoading: false - значит данные еще не были загружены или произошла ошибка;
если isLoading: true - данные еще загружаются
если newsData: [] (пустой массив) - значит новостей нет;
если `newsData: [данные про новости] - значит новости есть и они загружены;
В реакт-приложениях, все начинается с представления (описания) данных. Рисуйте в голове или на листочке, так как на основе такой шпаргалки, нам не составит труда сделать шаблон.
Начнем с составления выражений для шаблона. Первое:
1
{Array.isArray(news) && <News data={news} />}
Copied!
То есть мы проверяем, если в this.state.news - массив - то рисуй компонент новости, он уже умеет рисовать "новостей нет" или список новостей.
Документация про isArray (MDN)
Второе условие:
1
{isLoading && <p>Загружаю...</p>}
Copied!
Оформим все это в компоненте:
src/App.js
1
class App extends React.Component {
2
  state = {
3
    news: null,
4
    isLoading: false,
5
  }
6
  handleAddNews = data => {
7
    const nextNews = [data, ...this.state.news]
8
    this.setState({ news: nextNews })
9
  }
10
  render() {
11
    const { news, isLoading } = this.state // все необходимое взяли из state
12
​
13
    return (
14
      <React.Fragment>
15
        <Add onAddNews={this.handleAddNews} />
16
        <h3>Новости</h3>
17
        {isLoading && <p>Загружаю...</p>}
18
        {Array.isArray(news) && <News data={news} />}
19
      </React.Fragment>
20
    )
21
  }
22
}
Copied!
Осталось сделать асинхронный вызов и установить правильное состояние.
Помните, мы с вами один раз описали, что количество новостей отображает цифры в зависимости от данных и когда стали добавлять новости - мы это место вообще не трогали, но счетчик работал корректно. Это декларативный подход. Так же и сейчас - мы в силу того, что я вижу всю картину, описали шаблон и как ему себя вести, а состояние разруливать будем на последнем шаге. Такой трюк может быть недоступен вам некоторое время, пока вы обучаетесь, поэтому пишите код как будет удобно, например делайте шаг за шагом что-то и воюйте с ошибками, главное - практика.
Вернемся к коду и сделаем fetch-запрос + console.log'и. Как я уже говорил, запрос за данными будем делать в момент, когда компонент уже примонтирован (то есть появился на странице, то есть нам нужен метод жизненного цикла - componentDidMount):
src/App.js
1
class App extends React.Component {
2
  ...
3
  componentDidMount() {
4
    fetch('http://localhost:3000/data/newsData.json')
5
      .then(response => {
6
        return response.json()
7
      })
8
      .then(data => {
9
        console.log(this)
10
        console.log('приехали данные ', data)
11
      })
12
  }
13
  ...
14
}
Copied!
Посмотрите в network, все работает:
news network
Заглянем в console, и увидим, что так как мы используем стрелочные функции - мы не потеряли this.
this equal app in fetch
Рассказывать про то как работает promise я не буду, но если у вас есть вопросы, вот мои любимые материалы:
​Promise (Кантор)
​У нас проблемы с промисами (перевод статьи на хабре)
Урок подходит к логическому завершению. Осталось лишь корректно обновлять состояние компонента.
Задача: до запроса - сделать isLoading: true, после завершения запроса - обновить isLoading: false, и в news положить данные, пришедшие с сервера.
(так как решение в пару строк, я сделаю отступ. Очень хочу чтобы вы попробовали сами)
. . . . . .
Решение:
src/App.js
1
...
2
componentDidMount() {
3
  // ставим isLoading true, 
4
  // то есть запрос за даннмыи начался
5
  // фактически он начнется в строке с fetch,
6
  // но на переход от одной строки к другой
7
  // пройдут миллисекунды
8
  this.setState({ isLoading: true })
9
  fetch('http://localhost:3000/data/newsData.json')
10
    .then(response => {
11
      return response.json()
12
    })
13
    .then(data => {
14
      // запрос завершился успешно,
15
      // делаем isLoading: false
16
      // в news кладем пришедшие данные
17
      this.setState({ isLoading: false, news: data })
18
    })
19
}
20
...
Copied!
Что интересно, у нас опять все работает. Мы не трогали компонент <News />, так как мы вновь просто изменили "источник данных".
Так как запрос за данными происходит на localhost, данные прилетают мнгновенно. Давайте искусственно затормозим этот момент, чтобы увидеть как они "загружаются". Добавим таймаут, конечно же.
src/App.js
1
...
2
componentDidMount() {
3
  this.setState({ isLoading: true })
4
  fetch('http://localhost:3000/data/newsData.json')
5
    .then(response => {
6
      return response.json()
7
    })
8
    .then(data => {
9
      setTimeout(() => { // добавили задержку
10
        this.setState({ isLoading: false, news: data })
11
      }, 3000) // в три секунды
12
    })
13
}
14
...
Copied!
isloading news true
Подождите три секунды и увидите как появится список новостей. Причем, что хочется отметить - опять нам помогает React. Изменился state -> вызвался render. Никаких дополнительных манипуляций ;)
И никакого Redux/Mobx и прочего. Задача решена без "дичи" в виде кучи библиотек, которые здесь не уместны. Поздравляю.
Итого: научились выполнять асинхронные запросы и показывать прелоадер.
​Исходный код.
Приборка и импорты
Спам-фильтр
Last modified 2yr ago
Copy link