Laravel 返回的错误未在前端显示

Question

我在其中一条路线的 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 仅显示默认消息：

request failed with status code 500

而不是显示：

Couldn't Price the car

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

Answer 1

已更新

responseJSON 没有定义它只是 response

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

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

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

Answer 2

尝试使用 err.response.message

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

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

Answer 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 还使用了精简到最小的箭头函数。这是相同箭头函数的示例，只是 "normal":

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>

Laravel 返回的错误未在前端显示

Laravel returned error not shown in front-end

laravel

vue.js

axios

已更新