Vue，使用axios调用时如何处理错误

Question

我正在尝试使用axios时如何处理错误。请参见下面的代码：

MAX_INT

请求成功后，一切都很好。我收到警告说一切都很好。

我强迫后端为每个请求返回一个错误，因此我可以在Vue应用程序中模拟错误行为，这就是我观察到的情况：

即使收到错误也是如此。程序正在//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); } 的{​​{1}}中进行检查，检查以下图像：

我错过了什么？

Answer 1

问题：您为什么添加：

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

在您的network.js文件中？

我想您对Promise有误解。

从API Promise.prototype.then将返回另一个承诺。此新承诺将成为成功完成工作或捕获异常的一种方式。

从API Promise.prototype.catch将返回另一个承诺。此新承诺有所不同。来自文档：

  

如果onRejected抛出错误或返回本身被拒绝的Promise，则catch（）返回的Promise将被拒绝；否则，它将解决。

因此，在您的情况下，它将在下一个resolve调用中调用then。除非您在network.js文件中抛出错误是没有意义的。

删除network.js文件中的第2行，您将获得预期的行为。