前言:利用awaitTo优化了await只能接收成功的结果之后,却发现无论成功还是失败都进行了登录成功的跳转!!!找了半天却发现少了它??

一、登录代码

handleLogin() {
      this.$refs.loginForm.validate(async(valid) => {
        if (valid) { //校验表单数据成功
          this.loading = true
          const [err, res] = await loginAPI(this.loginForm)
          console.log(err)// 错误对象
          console.log(res)// 成功对象
          if (!err) { //登录成功
            this.$router.push(this.$router.currentRoute.query.redirect || '/')
          } else { // 登录失败
            console.log('错啦错啦')
          }
        } else {  //校验表单数据失败
          console.log('error submit!!')
          return false
        }
      })
    }

遇到的错误

当运行发现登录失败也进行的路由页面跳转？就说明完了，代码写错了！接着打印一下就看看变量 err res 中拿到的数据是什么?

账号密码都对说明应该登录成功 ,此时 err null res是成功时后台返回的数据 ,控制台打印结果与我想的一样没有错,那就看看登录失败的情况

账号密码错误说明应该登录成功 ,按着猜想应该是 err 错误对象 res undefined ,但是,制台打印结果却是:err null res undefined ,很不对劲!!

为了便于找错，加一个提示信息，改进一下代码

二、改进登录逻辑代码

代码展示

handleLogin() {
      this.$refs.loginForm.validate(async(valid) => {
        if (valid) { //校验表单数据成功
          this.loading = true
          const [err, res] = await loginAPI(this.loginForm)
          console.log(err)// 错误对象
          console.log(res)// 成功对象
          if (!err) { //登录成功
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.$router.push(this.$router.currentRoute.query.redirect || '/')
          } else { // 登录失败
            console.log('错啦错啦')
          }
        } else {  //校验表单数据失败
          console.log('error submit!!')
          return false
        }
      })
    }

错误表述:

账号密码都对,登录成功, 登录按钮加载状态关闭,进入首页,运行完美

账号密码不对 :登录应该失败,登录按钮加载状态关闭,给用户提示用户名或者密码不对.实际效果:登录按钮加载状态未关闭,打开控制台发现报错

报错展示

报错分析:

index.vue 的168行报错::null 读message, 说明res是空,但是res是成功才会返回的结果,这里登录失败res 是空 ,是正确的,所以实际问题是,为什么登录失败却进入了成功的代码???因为有if判断,正常情况下不应该执行到168代码,应该直接进入else控制台打印 "错啦错啦" ,接下来就分析err.

同时应注意:如果代码执行报错,会导致后面的代码不再执行,所以登录按钮的loading状态还未来得及设置为false,所以登录按钮一直处于加载中也是这个错误造成的.