解决 Vuex 无法获取 Laravel 接口的错误信息

小鱼儿 2023-06-30 01:59 64阅读 0赞

Vuex 调用 Laravel 接口向用户手机发送验证码，代码如下：

actions: { 
            sendVerificationCodes( {  commit },data ){ 
                commit( 'sendVerificationCodes', 1 );
    
                SupcellAPI.sendVerificationCodes(data)
                    .then( function( response ){ 
                        commit( 'sendVerificationCodes', 2 );
                        commit( 'setVerificationKey' ,response.data.key);
                    })
                    .catch( function(error){ 
                        commit( 'sendVerificationCodes', 3 );
                        console.log(error);
                    });
            },
        },

如果手机号已经被注册，响应是这样的，  
![在这里插入图片描述][20200114090150207.png]  
但是控制台打印出的错误竟然是这样的：

Error: "Request failed with status code 422"
        createError http://www.supcell.info/js/app.js?id=7ccb2b826fa7b1791d65:784
        settle http://www.supcell.info/js/app.js?id=7ccb2b826fa7b1791d65:1045
        handleLoad http://www.supcell.info/js/app.js?id=7ccb2b826fa7b1791d65:253
    app.js:83151:17

![在这里插入图片描述][20200114085956788.png]  
这样我们无法获取到合适的错误信息，我的解决办法是这样的：

首先获取响应对象：

console.log(error.response.data);

![在这里插入图片描述][20200114090958292.png]可以看到响应对象里包含了我们的错误信息对象 errors ,，我们的目标是获取"电话已经存在"这个错误信息，他是 errors 对象下面的 phone 数组的第一个值，我是这样获取的：

使用 javascript 的Object.keys(obj)方法， 获取 error.response.data.errors 对象下面的 phone 数组的第一个值，然后 使用 toString() 转为字符串：

> Object.keys(obj)
> 
> 参数：要返回其枚举自身属性的对象
> 
> 返回值：一个表示给定对象的所有可枚举属性的字符串数组

if(typeof error.response.data.errors === "undefined"){ 
                                commit( 'setVerificationCodesSendErrors',error.response.data.message);
                        }else{ 
                            commit( 'setVerificationCodesSendErrors', error.response.data.errors[Object.keys(error.response.data.errors)[0]].toString() );
                        }

![在这里插入图片描述][20200114091525320.png]

[20200114090150207.png]: https://img-blog.csdnimg.cn/20200114090150207.png
[20200114085956788.png]: https://img-blog.csdnimg.cn/20200114085956788.png
[20200114090958292.png]: https://img-blog.csdnimg.cn/20200114090958292.png
[20200114091525320.png]: https://img-blog.csdnimg.cn/20200114091525320.png