Есть бэкенд на django rest и фронтенд на react с компонентами . Через api можно получить список товаров , как их правильно передать в react и отобразить ? Смотрел, что часто используют Axios, я только начал изучать как между собой общаются фронтенд и бэкенд, информации не нашел . Хотелось бы узнать у опытных разработчиков как правильно реализовать данную связь. Какие практики сейчас используются и как это устроено(бекнд отдает данные через api в json , а мы с ними работаем уже на фронтенде?) И как передавть из React данные обратно на Django rest.
1 ответ
Может кому пригодится , а то тут "тяжелые" люди
Fetch API или Axios:
У fetch API имеется несколько недостатков. Он требует дополнительного действия для получения JSON из ответа. Также он не отлавливает все ошибки. Например, ошибка 404 возвращается как обычный ответ. Вам нужно самим проверять код ответа и разбираться с ошибками сети, которые были получены.
Таким образом вам придется обрабатывать ошибки дважды. Но вы можете воспользоваться библиотекой axios.js для решения этих проблем и получения более цельного кода, за что придется добавить еще одну внешнюю зависимость. Вот как выглядит код с axios:
fetchQuotes = () => {
this.setState({...this.state, isFetching: true})
axios.get(QUOTE_SERVICE_URL)
.then(response => this.setState({quotes: response.data,
isFetching: false}))
.catch(e => console.log(e);
}
Улучшений немного, но они очень полезны. Код для добавления новой цитаты тоже выглядит намного чище с axios. Вот версия fetch:
handleSubmitWithFetch = event => {
let data = new FormData()
data.append('quote', this.state.quote)
fetch(this.props.quote_service_url,
{method: 'POST', body: data})
.then(response => response.json())
.catch(e => console.log(e));
event.preventDefault();
}
А вот версия axios:
handleSubmit = event => {
axios.post(this.props.quote_service_url,
{'quote': this.state.quote})
.then(r => console.log(r))
.catch(e => console.log(e));
event.preventDefault();
}