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 Axios 返回 401、422 或其他内容，则会在控制台中引发错误并且整个方法停止运行。

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

如何捕捉错误 - 做某事（并将 $this 绑定到回调）然后继续该方法而不杀死整个脚本？

Answer 1

原因是 Axios 默认有一个这样的验证器功能：

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

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

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

尝试..catch：

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);
});

注意：由于不使用异步/等待，这与您的示例不同

错误回调：

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.
};