今天下午在写一个Vue练手项目的时候遇到的一个问题:在写登陆的时候,axios获取不到我需要的错误状态码。
问题复现
我写的是一个网易云音乐的项目,采用了网易云音乐API,在写登陆的时候用到了一个登陆API接口:/login/cellphone?phone=xxx&password=yyy
如果账号不存在或者账号格式错误分别会返回501、400错误,当然还会有其他错误的状态码,就不一一细说了。
501和400在我的测试中,axios是获取不到这个状态码的。
我的代码是这样的:
Loging() {
var that = this;
this.$axios.get( "/login/cellphone?phone="+this.username+"&password="+this.password).then(
function(response) {
that.loginLog = response.data;
if(that.loginLog.code!==200){
that.$toast.fail('密码错误');
}else
if(that.loginLog.code===200) {
that.$toast.success('登陆成功');
}
console.log(response);
// window.sessionStorage.setItem('token',response.data.token);
},function(err) {
}
)
}
我用使用的测试用例如下(接口测试时能够正常返回501状态码的):
https://域名/login/cellphone?phone=18373923375&password=123
从图片上可看出他返回了501错误,但是axios并没有获取到501这个状态码,亦或说他根本就没有请求成功,response里面没有任何值,这个可以从控制台没有打印出什么值可以看出来。
解决方法
使用.catch(.catch是什么我也还不知道,但是大佬指出了这个方法,我就试着百度了一下)
参考资料:①Vue中axios的使用技巧配置项详解
②axios怎么获取到error中的状态值,具体信息
通过上面这两篇文章,我就暂时将他认为是捕捉异常吧QAQ
好吧!下一步,利用它捕捉异常,修改后代码如下:
Loging() {
var that = this;
this.$axios.get( "/login/cellphone?phone="+this.username+"&password="+this.password).then(
function(response) {
that.loginLog = response.data;
if(that.loginLog.code!==200){
that.$toast.fail('密码错误');
}else
if(that.loginLog.code===200) {
that.$toast.success('登陆成功');
}
window.sessionStorage.setItem('token',response.data.token);
}
).catch((error)=>{
console.log(error.request.status);
if(error.request.status===400){
console.log("输入类型有误");
}else if(error.request.status===501){
console.log("账号错误");
}else{
console.log(error.request.status);
}
}
);
}
测试使用的用例依然是:
https://域名/login/cellphone?phone=18373923375&password=123
有控制台打印出的结果可见:他已经将返回的状态码打印出来了,也做了相应的处理,到这里我们可以认为,我们已经获取到了返回的501状态码。
如果你已经获取到了错误信息而打印不出状态码的建议你去看参考资料2。
这个坑就先写到这吧,上面我说的专业性可能不是很强,但是能解决这个问题,欢迎大佬指出表述错误!
版权属于:Citrons
本文链接:https://www.citrons.cn/jishu/261.html
转载时须注明出处及本声明
对于请求后台接口,处理逻辑有:请求成功,返回异常的code和msg;请求成功,返回正常的请求结果。请求无响应;请求异常;等,所以一般会封装一个返回类来包装返回结果,以便前端处理。比如ReturnVo{ code:'200', msg:'访问成功', data:{"name":"test"} } ,前端这样就可以根据code和msg显示错误信息,当请求不到接口或发生异常,请求就会报错,这就到了catch块,在这里处理错误,一般只打印错误信息以便调试。如果有特殊业务处理另说 ::funny:01::
我这个小菜鸡一开始不知道这玩意(⁎⁍̴̛ᴗ⁍̴̛⁎) ʕ•̫͡•ོʔ•̫͡•ཻʕ•̫͡•ʔ•͓͡•ʔ