VueJS、Axios、Laravel - 捕获错误

Question

我正在使用以下代码向 Laravel 发布内容：

        upload: async function() {     

        response = await axios.post(url, data, {
            headers: {
                'Content-Type': 'multipart/form-data',
            }
        }).catch(function(error) {
            console.log(error.response.data.errors);
        });

（无关代码省略）

当 Laravel 返回 200 时，这总体上有效。如果我从 Laravel 返回 401、422 或其他内容 Axios 在控制台中引发错误并且整个方法停止运行。

我一直认为这是一种对开发人员非常不友好的行为——我不理解吗？ 从后端返回不同的状态代码 API 应该有助于读取 Vue 中的响应，但 Vue/Axios 将每个非 200 响应视为致命错误。

我怎样才能捕捉到错误 - 做一些事情（并将$this绑定到回调）然后继续使用该方法而不杀死整个脚本？

Answer 1

原因是 Axios 默认有一个验证器 function 像这样：

 validateStatus: function (status) {
    return status >= 200 && status < 300; // default
 },

状态码 300 及以上且小于 200 将使 axios 抛出。

您可以通过以下任一方式使其不抛出（停止进一步执行）：

试着抓：

try {
    response = await axios.post(url, data, {
        headers: {
            'Content-Type': 'multipart/form-data',
        }
    });
} catch (error) {
    this.doSomething() // this is available here
}

.catch 上 axios：

axios.post(url, data, {
    headers: {
        'Content-Type': 'multipart/form-data',
    }
}).catch(error => {
    console.log(error.response.data.errors);
});

注意：由于不使用 async/await，这与您的示例不同

错误回调：

axios.post(url, data, {
    headers: {
        'Content-Type': 'multipart/form-data',
    }
}, error => {
    console.log(error.response.data.errors);
})

如果您不希望 Axios 强制您抛出 300 以上的状态码，您可以更改默认的 axios 验证器：

axios.defaults.validateStatus = (status) => {
    return status === 200; // your own logic here to throw or not.
};