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 default具有如下验证程序功能：

 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
}

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