Отправка данных React через fetch и их получение

Question

Всем привет. Делаю тестовое задание с гитхаба для новичков: github.com/avito-tech/safedeal-frontend-trainee

Сделал все кроме последнего пункта 3. Цитирую ниже:

"POST https://boiling-refuge-66454.herokuapp.com/images/:imageId/comments - добавление комментария (204 – OK, комментарий не сохраняется).

Вот эту строчку "добавление комментария (204 – OK, комментарий не сохраняется)." - не понял.

Т.е задача стоит такая. Через форму отправлять данные на сервер (наш комментарий), после чего получать полный список комментариев и потом уже выводить все комменты на сайте

С фетчем, получением данных и синтаксисом я разобрался. А вот с отправкой - нет.

Далее я выложу максимально стерильную функцию отправки данных на сервер с уже вставленным id картинки.

  function submitHandler(event){
        event.preventDefault()

        fetch(`https://boiling-refuge-66454.herokuapp.com/images/237/comments`,{
            method: "POST",
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
            body:  JSON.stringify({
                name:'fake name',
                comment:'fake comment'

            }),
        })
            .then(response => response.json())
            .then(json=>console.log('Тут хочу получить json, но ничего не приходит',json))

Но! В последнем .then я не могу получить данные. Пусто. В консоль лог ничего не приходит, хотя должно. Если не отправить одно из полей, то придет catch с ошибкой, мол не пришло поле допустим - "comment". А если все - нет консольки.

Друзья, прошу вашей помощи. Основная задача такая: Отправить данные через апи и сразу-же их получить обратно с тем комментарием, который я только что отправил. Из задания я понял, что требуется именно это.

Answer 1

"204" не отправит "JSON", поэтому вы не можете его получить. Именно поэтому он называется "204 - No Content".

Попробуйте вот так:

function submitHandler(event) {
  event.preventDefault()
  fetch(`https://boiling-refuge-66454.herokuapp.com/images/237/comments`, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      name: 'test name',
      comment: 'test comment',
    }),
  })
    .then((response) => {
      console.log('response', response)
      // "JSON" не отправляется при статусе "204 - No Content"
      // Итак, вы можете написать это:
      if (response.status === 204) {
        return new Promise((resolve) => resolve(null))
      }
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      return response.json()
    })
    .then((json) => {
      // Его значение равно "null", потому что мы сделали "resolve (null)"
      console.log('Тут хочу получить json, но ничего не приходит', json)
    })
}

БЛОГ НА HUSL

Отправка данных React через fetch и их получение

Ответы (1 шт):