今天下午在写一个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。
这个坑就先写到这吧,上面我说的专业性可能不是很强,但是能解决这个问题,欢迎大佬指出表述错误!

Last modification:December 11th, 2019 at 11:06 pm
If you think my article is useful to you, please feel free to appreciate