В ответ на fetch запрос получаю 403 ошибку, но и сообщение от cервера получаю, как его вывести в catch?

Question

Среда выполнения React. Отправляю запрос:

fetch('https://my-site.ru/bla/bla-bla/get-token', {
  method: 'POST',
  body: JSON.stringify({
  username: 'username',
  password: 'password'
  })
})
.then(res => {

  if (res.status >= 200 && res.status < 300 ) {
      return res;
  } else {
     let error = new Error(res.statusText);
     error.response = res;
     throw error
  }

  })
  .then((res) => {

    if (res.headers['content-type'] !== "application/json; charset=UTF-8") {
      let error = new Error('Некорректный ответ от сервера');
      error.response = res;
      throw error
  } else func(res.data)

}).catch(e => {
console.log(e) //выведет 'Error [object promice]'
console.log(e.message) // Выведет '[object promice]'
})

Если Имя или Пароль введены не верно, сервер возвращает 403 и сообщение на вкладке DevTooll о том, что именно не так. Но я никак не могу вывести это сообщение в catch. Я попадаю в catch при 403 ошибке, но не пойму как достать сообщение от сервера.

Вот так выглядит на вкладке "ответ" в Devtools

{"success":false,"statusCode":403,"code":"invalid_username","message":"\u041e\u0448\u0438\u0431\u043a\u0430: \u0418\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f asd \u043d\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0431\u044b\u043b\u0438 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u0430\u0434\u0440\u0435\u0441 email.","data":[]}

Вот код ответа в браузере на вкладке "предварительный просмотр"

Как достать этот объект, что на скриншоте и вывести message?

Заголовки запроса и ответа

Объекта ответа полученный в catch

Answer 1

fetch('https://my-site.ru/bla/bla-bla/get-token', {
  method: 'POST',
  body: JSON.stringify({
  username: 'username',
  password: 'password'
  })
})
.then(res => res.json())
.then(res => {
  if (res.statusCode == 403) console.log(res.message);
})

Answer 2

Нашел в чём проблема. Всему виной .json() .then и поточность. Сразу, рабочий код:

  fetch('https://my-site.ru/bla/blabla/token', {
    method: 'post',
    body: JSON.stringify({
      username: 'username',
      password: 'password'
    }),
  headers: {
    'Content-Type': "application/json"
    }
  })
  .then(response => {
    if (response.status >= 200 && response.status < 300) {
      return response.json();
  } else {
      return response.json() //Парсим ответ
      .then(result => { //Далаем занесение в catch ТОЛЬКО ПОСЛЕ ПАРСИНГА!
        let error = new Error(result.status);
        error.response = result ;
        throw error
      })
  }
  })

У меня пока маловато знаний, что бы подробно обьяснить, но тут что то связанное с поточностью процессов. Просто информация уходила в catch до того как была распарсена, поэтому видимо, надо обязательно использовать then после .json()

Вот это обсуждение очень в тему: https://stackoverflow.com/questions/37555031/why-does-json-return-a-promise

БЛОГ НА HUSL

В ответ на fetch запрос получаю 403 ошибку, но и сообщение от cервера получаю, как его вывести в catch?

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