Как получить ответ от экспресс-сервера об ошибке, используя axios в приложении реакции - PullRequest
Новая
       22

Как получить ответ от экспресс-сервера об ошибке, используя axios в приложении реакции

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

Я использую реакцию и экспресс. В приложении «Реакция» я хочу использовать axios.post для отправки учетных данных пользователя на сервер Express и, надеюсь, получить от него ответ. Из ответа я хочу извлечь сообщение и статус. Это выглядит так: 

handleSubmit = e => {
    e.preventDefault();
    const { email, password } = this.state;
    axios
      .post("/api/users/login", {
        email,
        password
      })
      .then(res => console.log(res.data.msg, res.status))
      .catch(err => console.log(err));
  };

В бэкэнде я использую модель Мангуста, чтобы узнать, существует ли пользователь в базе данных. 

router.post("/login", (req, res) => {
  const { email, password } = req.body;

  User.findOne({ email })
    .then(user => {
      if (!user) return res.status(400).json({ msg: "No such user in the DB" });

      bcrypt.compare(password, user.password).then(isMatch => {
        if (!isMatch) {
          return res.status(400).json({ msg: "Wrong password" });
        }

        req.session.userId = user.id;
        res.status(200).json({ msg: "You have logged in" });
      });
    })
    .catch(err => console.log("Error in catch in findOne"));
});

Если все идет хорошо, и в базе данных есть пользователь с этими учетными данными, я получаю, как и ожидалось, сообщение «Вы вошли в систему» ​​и состояние 200 в консоли НО Если возникает ошибка, я не получаю в пользовательском сообщении об ошибке Axios, например «Нет такого пользователя в БД» или «Неверный пароль», вместо этого я получаю ошибку по умолчанию, я думаю, это выглядит так: 

xhr.js:166 POST http://localhost:3000/api/users/login 400 (Bad Request)
Login.js:21 Error: Request failed with status code 400
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

Мой вопрос: как я могу получить свои собственные сообщения об ошибках вместо сообщений по умолчанию, если что-то пойдет не так? Например: если пароль неверный, я хочу получить это сообщение в ответе axios «Нет такого пользователя в БД».

1 Ответ

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

Чтобы сервер Axios перехватил ответ:

Измените console.log(error) на console.log(error.response) в перехвате Axios.

Ссылка: https://github.com/axios/axios/issues/960#issuecomment-309287911

Для пользовательской обработки ошибок в реагировать:

Добавить в ваше состояние новую переменную error: null.
в аксиосах, в .then(res=> {}) внутри ее блока вы условно выдает ошибку.
Например:

.then( res => {
 if(res.status === 400) {throw new Error("your custom message")}
   ...your code...
 })

Синтаксис ошибки :

новая ошибка ([message [, fileName [, lineNumber]]])

сгенерированная ошибка будет перехвачена в следующем блоке catch: 

.catch(err => this.setState({error:err}))

Теперь содержимое ошибки находится в пределах error объекта в состоянии.
Для доступа и отображения пользовательских настроек.сообщение, в зависимости от того, где вы хотите, это либо:

this.state.error.message или (this.)props.error.message

...