Как достучаться до response в ошибке и вывести текст «User with this username already exists» в консоль?

Question

[bimsalrobit]

Делаю регистрацию в приложении.
При отправке формы на локальный сервер если username уникальный получаю вот такой response в Network:

response когда все ок

Если username не уникальный то вот такой response:

response ошибки

и ошибку в консоли если username не уникальный :

ошибка в консоли

Вообще я делаю запрос на сервер с помощью кода(закоментировал то что в консоли должно быть):

onSubmit: async (formValues) => {
          console.log('submit', formValues);
          setSubmitting(true);
          try {
              const res = await api('api/auth/register', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              const token = res.token.token;
              const er = res[0].message;
              
              localStorage.setItem('myToken', token);
              console.log('Result!',token);
              console.log('Error',er);         // должно отобразить в консоль: User with this username already exists
              history.push("/home"); 
          } catch(e) {
              console.error(e);
          } finally {
              setSubmitting(false);
          }   
      },

И вот в response я достучался вот так
const token = res.token.token;
поэтому могу в консоль вывести token в консоль
А вот когда пишу:
const er = res[0].message;
то ничего не выводится в консоль.....

Хотя должно отобразиться:
User with this username already exists

Как достучаться до response в ошибке и вывести текст "User with this username already exists" в консоль?

Comments

[edward_freedom]

А вот когда пишу:
const er = res[0].message;
И вот в response я достучался вот так
const token = res.token.token;

Так у тебя res массив или обьект?

[bimsalrobit]

edward_freedom, когда получаю ошибку 400 Bad Request судя по тому что в Network response ошибки массив который содержит обьект:

А тот response который получаю когда запрос успешный он обьект

[edward_freedom]

bimsalrobit, а зачем тебе массив возвращать, когда пользователь already exist, а не обьект, как в случае , когда все ок?
У тебя ошибка говорит, что нет поля токен, а у тебя там масств уже, а не обьект

const token = res.token.token;

[bimsalrobit]

edward_freedom, вы меня запутали) так дело в том что я в консоль могу вывести токен если пропишу вот так const token = res.token.token; значит я путь пишу верный, а когда пишу:
const er = res[0].message; ничего в консоли не отображается

[edward_freedom]

bimsalrobit, потому что у тебя не удобно сделано, в одном случае, у тебя возвращается массив, в другом обьект.
Вот тут ты получаешь обьект

const token = res.token.token;

А тебе приходит массив

const er = res[0].message;

А у тебя в коде и массив и обьект одновременно, а так не бывает

const token = res.token.token;
const er = res[0].message;

[bimsalrobit]

edward_freedom, так как мне изменить мой код? я ж не могу изменить то что прилетает из сервера, я могу только свой код изменить

Answer 1

[real2210]

Статус 400 отрабатывает в трай

if (res.status === 400)
 console.log(res.message)
else if (res.status === 200)
 // присваиваешь токен

Comments

[bimsalrobit]

о, спасибо а вы могли б это же написать только в моем коде:

onSubmit: async (formValues) => {
          console.log('submit', formValues);
          setSubmitting(true);
          try {
              const res = await api('api/auth/register', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              const token = res.token.token;
              const er = res[0].message;
              
              localStorage.setItem('myToken', token);
              console.log('Result!',token);
              console.log('Error',er);         // должно отобразить в консоль: User with this username already exists
              history.push("/home"); 
          } catch(e) {
              console.error(e);
          } finally {
              setSubmitting(false);
          }   
      },

?

Answer 2

[Mazino]

Зачем вам конструкция try catch, если вы ее используете не правильно?

onSubmit: async formValues => {
          console.log('submit', formValues);
          setSubmitting(true);
          try {
              const { token: { token } } = await api('api/auth/register', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              localStorage.setItem('myToken', token)
              console.log('Result!', token)    
              history.push("/home"); 
          } catch({ status, data: [{ message }] }) { // без понятия что вы используете в качестве обработчика запросов и как он пакует данные, но все они работают на базе одного api, а у них данные примерно так и разложены. Исследуйте этот вопрос, с чем в работаете и что происходит.
              if(status === 400) console.error(message); 
          } finally {
              setSubmitting(false);
          }   
      },

Comments

[Mazino]

предайте res в console.log и покажите что там
upd: а в блоке catch вот так console.error('MyOwnCaustomError', e)