0

Среда выполнения 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 введите сюда описание изображения

4
  • Раз console.log(e.message) выведет'[object promice]' в консоли, думаю надо копать в сторону того, что нужно обратиться к этому промису и дождаться его выполнения. У меня мало знаний, это лишь предположение 3 мая 2022 в 17:00
  • а на вкладке "заголовки" что? Там скорее всего 200. Вам скорее всего приходит json с информацией. Её и обрабатывайте. 3 мая 2022 в 17:10
  • В заголовке овтета на вкладке "заголовки" так же приходит 403 код. Продолжаю копать в сторону обработки самого промиса возвращенного catch 3 мая 2022 в 17:15
  • Я сбит с толку. Даже если в catch просто сделать return e и добавить следующий then, то этот then все равно ввозвратит промис 3 мая 2022 в 17:20

2 ответа 2

0
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);
})
7
  • Не работает. Я поставил debugger на входе и посмотрел, что приходит в res на этапе выполнения. Там вообще пустое поле statusText. Не понимаю, откуда вообще тогда формируется объект на скриншоте. В какой момент создается этот злополучный промис и как с ним взаимодействовать 3 мая 2022 в 17:25
  • приложите скриношты заголовков и ответа в основной вопрос 3 мая 2022 в 17:27
  • Приложил скришнот заголовков и ответов 3 мая 2022 в 17:32
  • Продолжу искать решение, как найду дам ответ 3 мая 2022 в 17:38
  • Я смог получить ответ запроса в catch такой, какой получал на входе. При формировании объекта Error я просто закинул не текст ответа, а весь ответ: new Error(res). В catch: console.log(error.response) Получил объект ответа(добавил скриншот) Но в объекте, что я получил всё равно нет того сообщения, что выдаёт сервер, которое я вижу в DevTools 3 мая 2022 в 17:48
0

Нашел в чём проблема. Всему виной .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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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