浏览器收到响应后覆盖消息内容

Question

当我尝试从响应中获取错误消息时，我在使用 DingoAPI 和 Vue.js 时遇到了一点问题。我认为浏览器正在用默认消息替换我的自定义消息。这是我的代码：

PHP 脚本

if($request->readerId){
      Return succes (this works properly)
else{
      return $this->response->error(
           'No reader',
           400 //(or diffrent code)
      );
}

Vue.js 脚本

await axios.post(API_URL + 'card/', {
            some data
        }, {
            headers: {
                headers
            },
        }).then(({data}) => {
            context.commit(SET_RESPONSE, data);
        }).catch((error) => {
            console.log(error.message);
            throw error
        })

当我试图在网络选项卡中查看我的消息时，我可以看到（因此 DingoAPI 正确地做到了）：

{"message":"No reader","status_code":400}

但是当我使用 console.log(error.message) 或试图在页面上显示它时，出现标准错误消息：

Request failed with status code 400

有没有办法用 DingoAPI 设置错误消息并在我的 .js 脚本中捕获它？也许我需要编写自己的自定义异常？

Answer 1

您想要的是访问错误变量的响应数据。

console.log(error.response.data.message); // No reader

否则可以登录error.response查看对象：

console.log(error.response);

如果您想知道为什么要打印 请求失败，状态代码为 400:

The problem is when the console.log tries to output the error, the string representation is printed, not the object structure, so you do not see the .response property.

来源：https://github.com/axios/axios/issues/960#issuecomment-309287911

浏览器收到响应后覆盖消息内容

The browser overwrites the content of the message after receiving the response

laravel

vue.js

dingo-api

axios