VueJS、Axios、Laravel - 捕获错误

Posted 2023-02-23

【中文标题】VueJS、Axios、Laravel - 捕获错误

【英文标题】：VueJS, Axios, Laravel - catch errors

【发布时间】：2021-07-05 14:48:59

【问题描述】：

我正在使用以下代码向 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 绑定到回调）然后继续该方法而不杀死整个脚本？

【问题讨论】：

如果您阅读了accepted HTTP codes，axios 正在做应该做的事情。您认为重定向 (3xx) 是来自 API 的成功响应吗？ 4xx/5xx 怎么样？如果你的代码在你得到4xx 时停止工作，那是因为你做错了，你使用async/await 的方式不好，你必须使用try/catch 而不是await + js.catch...这就是为什么您的代码停止工作...

【参考方案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.
;

【讨论】：

最佳答案，但我建议（对问题的作者）不要更改默认 Axios 的行为。它会使习惯此默认设置的其他任何人感到困惑...