Возврат значений ошибок через приложение Axios / Express To React - PullRequest
Новая
       46

Возврат значений ошибок через приложение Axios / Express To React

0 голосов
/ 12 июня 2019

У меня есть функция handleSubmit, которая извлекает данные из моего бэкэнда как часть более крупного компонента. Я хотел бы отправить информацию об ошибке в мое хранилище с избыточностью и / или локальный компонент, когда серверная часть отказывает, но я не могу это сделать.

Функция handleSubmit выглядит следующим образом (она использует ловушки React, которые правильно подключены. Может публиковать полный компонент, если это полезно): 

const handleSubmit = async (e, { dataSource, filter, filterTarget }) => {

    e.preventDefault();
    setIsLoading(true);
    setErrorValue(null);
    setError(false);

    const token = localStorage.JWT_TOKEN;
    const link = filterTarget === "Identifier" ? `http://localhost:8081/api/${dataSource}/${filter}`: `http://localhost:8081/api/${dataSource}?filter=${filter}&filterTarget=${filterTarget}`;

    try {
        let data = await axios.get(link, { headers: { authorization: token }});
        props.setData(data);
        setError(false);
        setIsLoading(false);
    } catch (err){           
        setErrorValue(err.message);
        setError(true);
        setIsLoading(false);
    };
};

Я намеренно делаю неверные запросы через форму, что вызовет ошибку в моем бэкэнде. Они обрабатываются с помощью моей пользовательской функции промежуточного программного обеспечения Express, которая выглядит следующим образом (я добавлю больше, как только этот фреймворк заработает): 

  handleOtherError: (error, req, res, next) => { // Final custom error handler, with no conditions. No need to call next() here.
      console.log("This error handler is firing!");
      return res.status(500).json({ 
          message: error.message,
          type: "ServerError"
      });
    }

Я знаю, что эта функция срабатывает, потому что на моем сервере появляется оператор console.log, и если я изменяю код состояния, то и ошибка кода состояния на внешнем интерфейсе в моей консоли Google Chrome.

Фактически, если я перехожу на вкладку сети, для моего запроса отображается правильная информация об ошибке. Вот видео с моим неправильным запросом:

enter image description here

Однако, когда я пытаюсь получить доступ к err.message на моем внешнем интерфейсе, я не могу этого сделать. Сообщение err.mess в моем обработчике try / catch для функции handleSubmit только дает мне Request failed with status code XXX

Что я делаю не так?

Ответы [ 2 ]

1 голос
/ 12 июня 2019

См. https://github.com/axios/axios#handling-errors

Вы можете получить доступ к ответу, используя err.response.data.message, а не err.message.

1 голос
/ 12 июня 2019

Нашел ответ, опубликованный в другом месте: https://github.com/axios/axios/issues/960

Видимо, чтобы получить сообщение, вы должны использовать err.response.data.message

Простое использование «err» даст вам только представление строки об ошибке.

...