【问题标题】：Laravel returned error not shown in front-endLaravel 返回错误未在前端显示
【发布时间】：2019-11-27 05:55:13
【问题描述】：

我在 Laravel API 中为其中一条路线提供了类似的东西：

return response()->json(['message' =>  "Couldn't Price the car"], 500);

在前端，我有

try {
 let data = await Axios.get("blax", {});    
} catch(err) {
  console.log(err.message);
}

err.message 只显示默认消息：

请求失败，状态码 500

而不是显示：

无法为汽车定价

如何显示我的自定义消息？

【问题讨论】：

您是否查看了浏览器网络选项卡上的响应内容？

标签： laravel vue.js axios

【解决方案1】：

更新

responseJSON 没有定义它只是response

试试console.log(err.response.message)，如下：

try{
 let data = await Axios.get("blax", {});

}catch(err){
  console.log(err.response.message);
}

【讨论】：

【解决方案2】：

尝试使用err.response.message

try{
 let data = await Axios.get("blax", {});

}catch(err){
  console.log(err.response.message);
}

【讨论】：

【解决方案3】：

在我看来，它完美地捕捉到了：

new Vue({
  el: "#demo",
  data: {
    response: null,
  },
  async created() {
    try {
      let data = await axios.get("https://httpstat.us/500", {});
    } catch (err) {
      console.log('ss', err.message);
      this.response = err.message;
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

<div id="demo">
Error: {{response}}
</div>

如果你想最小化你的代码，你可以直接在 axios 调用上做.catch，像这样：

let data = axios.get("https://httpstat.us/500", {}).catch(e => e.message);

这个 catch 还使用了精简到最小的箭头功能。这是一个相同箭头函数的示例，只是“正常”：

let data = axios.get("https://httpstat.us/500", {}).catch((e) => {return e.message});

new Vue({
  el: "#demo",
  data: {
    response: null,
  },
  async created() {
    this.response = await axios.get("https://httpstat.us/500", {}).catch(e => e.message);
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

<div id="demo">
Error: {{response}}
</div>

【讨论】：