已更新

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仅显示默认消息：

请求失败，状态码为500

而不是显示：

无法为汽车定价

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

Answer 1

尝试使用err.response.message

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

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

Answer 2

已更新

responseJSON未定义，只是response

尝试console.log(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);

此捕获也使用精简到最小的箭头功能。这是相同箭头功能的示例，只是“正常”：

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返回的错误未在前端显示

3 个答案:

已更新