0

Есть бэкенд на django rest и фронтенд на react с компонентами . Через api можно получить список товаров , как их правильно передать в react и отобразить ? Смотрел, что часто используют Axios, я только начал изучать как между собой общаются фронтенд и бэкенд, информации не нашел . Хотелось бы узнать у опытных разработчиков как правильно реализовать данную связь. Какие практики сейчас используются и как это устроено(бекнд отдает данные через api в json , а мы с ними работаем уже на фронтенде?) И как передавть из React данные обратно на Django rest.

1
  • Кто какие технологии знает, тот те и использует. Нет никакого смысла узнавать у опытных разработчиков про стек, который вы не изучали.
    – Pilaton
    30 ноя 2022 в 14:01

1 ответ 1

0

Может кому пригодится , а то тут "тяжелые" люди

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();
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.