Как сделать Ajax запрос на React js?

Question

[AntonVirovets]

Здравствуйте. Есть такое задание:
Необходимо написать приложение на ReactJS, которое будет запрашивать AJAX-запросом этот json: demo.omnigon.com/pgatdemo1/mikeg/products.json.
И потом вывести в виде списка полученные товары.
Но проблема в том что я React не знаю еще, и не могу найти точную инфу где посмотреть как это сделать. Помогите разобраться)

Answer 1

[Роман Александрович]

Для аякс запросов можете использовать Fetch или Axios.
Советую выбрать второй.

Comments

[AntonVirovets]

это я понял) а подскажите, с чего мне начать изучать что бы построить такое приложение?

[Роман Александрович]

AntonVirovets, ну у вас в проетк есть редукс? или это простенький проект на пару компонентов?
Если второе тогда в ComponentDidMount пишете ваш запрос что бы он стянул необходимые данные с сервера.
https://github.github.io/fetch/ //документация Fetch
https://github.com/axios/axios //документация axios
И там и там маленькие примеры для старта

[AntonVirovets]

Роман Александрович, Это маленький проект где нужно ттолько взять данные из json и вывести их на странице с помощью reactjs

[Роман Александрович]

AntonVirovets, Тогда как я и написал
В ComponentDidMount пишите

fetch(url, {
  method: "GET",
  headers: {
    "Content-Type": "application/json"
  },
}).then((response)=> {
  console.log(response.status  )   //=> number 100–599
  console.log(response.statusText) //=> String
  console.log(response.headers )   //=> Headers
  console.log(response.url)        //=> String

  console.log(return response.text())
}

[hotabmax]

Благодарю, Роман

Answer 2

[Максим]

Или используйте старый xhr (новый fetch тоже норм). В общем, тут суть в том, что ваш вопрос больше о том, как сделать асинхронный запрос в React. Все просто: храните начальное состояние и флаг загрузки в стейте. При запросе обновляйте. Реакт сам все отрисует при изменение стейта.

Пример (код с одной из глав нового учебника, если интересно инфа в профиле)

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      isLoading: false,
    }
  }
  componentDidMount() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:3000/data.json', true); // замените адрес
    xhr.send();
    this.setState({ isLoading: true })

    xhr.onreadystatechange = () => {
      if (xhr.readyState !== 4) {
        return false
      }

      if (xhr.status !== 200) {
        console.log(xhr.status + ': ' + xhr.statusText)
      } else {
        this.setState({
          data: JSON.parse(xhr.responseText),
          isLoading: false,
        })
      }
    }
  }
  renderProducts() {
    const { data, isLoading } = this.state
    if (isLoading) {
      return <img src='/i/preloader.gif' alt='загружаю...' /> // рисуем прелоадер
    } else {
      return data.map(item => {
        // я здесь отрисываю все через другой компонент, вы же можете просто рисовать сразу верстку для начала
        return <ProductCard key={item.id} name={item.name} price={item.price} quantity={item.quantity} />
      })
    }
  }
  render() {
    return (
      <div className='App'>
        <div className='product-list'>
          {this.renderProducts()}
        </div>
      </div>
    )
  }
}

Comments

[Александров]

Тоже на собеседованиях говорил, что асинхронные запросы нужно в componentDidMount, но аднажды меня спросили: а в constructor'е можно?

Так вот, можно?

Answer 3

[Егор Живагин]

У React же просто охренительный официальный туториал

Пройдите его - это несколько часов займёт. Пока вы не разберётесь немного с Реактом - вы ничего на нём не напишете)

Comments

[AntonVirovets]

Спасибо, с этого и начну! Действительно, вроде бы простая задача, а я даже не знаю с какой стороны к ней подойти