Как получить сообщение об ошибке бэкэнда на веб-интерфейсе с помощью Fetch - PullRequest
Новая
       10

Как получить сообщение об ошибке бэкэнда на веб-интерфейсе с помощью Fetch

0 голосов
/ 03 марта 2019

Я не понимаю, как fetch работает для возврата сообщений об ошибках из бэкэнда во внешний интерфейс.Я не совсем уверен, какие свойства добавить к коду ошибки в функции fetch на стороне интерфейса.Цель состоит в том, чтобы отправить ошибку («Адрес электронной почты ..») и отобразить ее в пользовательском интерфейсе.

Подробная информация о бэкэнд-посте.Если пользователь уже зарегистрирован, выведите ошибку 400. 

const signupPost = function (req, res) {
  Base.findOne({
    userName: req.body.userName
  }, 
  function (user, err) {
    if (err) {
      return res.status(400).send({
        error: 'The email address you have entered is already associated with another account.'
      });
    }

Вот метод в моем интерфейсе Vue с обработкой ошибок: 

methods: {
  signup() {
    this.errorMessage = '';

    if (this.validUser()) {
      const body = {
        userName: this.user.userName,
        firstName: this.user.firstName,
        lastName: this.user.lastName,
        telephone: this.user.telephone,
        password: this.user.password
      }

      fetch(SIGNUP_URL, {
        method: 'POST',
        body: JSON.stringify(body),
        headers: {
          'content-type': 'application/json'
        }
      })
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        return response.json().then((error) => {
          throw new Error(error);
        })
      })
      .then(user => {
        console.log(user)
      })
      .catch((error) => {
        this.errorMessage = error
      });
    }
  },

1 Ответ

0 голосов
/ 03 марта 2019

Вы почти у цели.Вы должны получить доступ к error внутри возвращенного тела: 

return response.json().then((body) => {
  throw new Error(body.error)
})

и затем использовать message для возвращенного объекта error: 

.catch((error) => {
  this.errorMessage = error.message
})
...