Vue, как обрабатывать ошибки при использовании вызовов Axios

Question

Я пытаюсь разобраться, как обрабатывать ошибки при использовании axios. Пожалуйста, смотрите код ниже:

//Admin.vue

methods: {
    saveClicked: function(){

      updateConfig(this.editedConfig)
        .then(response => {
          console.log("in here");
          console.log(response);
          this.info.showAlert = true;
          this.info.message = "Successfully updated config!!"
          this.info.alertType = "success";
          this.showJsonEditor = !this.showJsonEditor;

        })
        .catch(error => {
          this.info.showAlert = true;
          this.info.message = "Failed to update config, please try again later"
          this.info.alertType = "error";
        });
    }
}

//network.js

function updateConfig(editedConfig){

  return axios.put(URL,editedConfig, {
    headers: {
      "Content-type": "application/json"
    }
  })
      .then(response => response)
      .catch(error => error);
}

Когда запросы успешны, все в порядке. Я получил предупреждение, что все хорошо.

Я заставил свой бэкэнд возвращать ошибку для каждого запроса, чтобы я мог смоделировать поведение ошибки в своем приложении Vue, и вот что я заметил:

Даже при получении ошибки. Программа проходит через then() в Admin.vue, проверьте изображение ниже:

Что я пропустил?

Answer 1

Вопрос: Почему вы добавили:

   .then(response => response)
   .catch(error => error);

в вашем network.js файле?

Полагаю, у вас есть какое-то недопонимание Обещания.

Из API Promise.prototype.then вернет другое обещание. Это new Promise будет либо способом составить что-то, что нужно сделать в случае успеха, либо поймать исключение.

Из API Promise.prototype.catch вернет другое обещание. Это new Promise немного отличается. Из документа:

Обещание, возвращаемое catch (), отклоняется, если onRejected выдает ошибку или возвращает Обещание, которое само отклоняется; в противном случае это разрешается.

Таким образом, в вашем случае он будет вызывать resolve со следующего then вызова. Если вы не выбросите в файл network.js ошибку, которая не имеет смысла.

Удалите 2 строки в файле network.js, и вы получите желаемое поведение.