After using awaitTo, the successful logic is executed regardless of the login success or failure

Preface: After using awaitTo to optimize await, only successful results can be received, but it is found that no matter whether it succeeds or fails, the login success jump is made!!! After searching for a long time, I found that it is missing??

1. Login code

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
        }
      })
    }

error encountered

When running and finding that the login fails, the routing page jumps? That's it, the code is wrong! Then print it to see what data is in the variable err res?

Both the account and password are correct, indicating that the login should be successful. At this time, err null res is the data returned by the background when it succeeds. The console print result is the same as I thought, and there is nothing wrong with it. Then look at the login failure.

The account password is wrong, indicating that the login should be successful. According to the guess, it should be err error object res undefined, but the printed result of the console is: err null res undefined, which is very wrong!!

In order to facilitate error-finding, add a prompt message and improve the code

2. Improve the login logic code

code display

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
        }
      })
    }

wrong statement:

The account and password are all correct, the login is successful, the loading status of the login button is closed, enter the home page, and the operation is perfect

Incorrect account and password: login should fail, the loading status of the login button is closed, and the user is prompted that the user name or password is incorrect. Actual effect: the loading status of the login button is not closed, and an error is reported when the console is opened

Error display

Error analysis:

 The 168th line of index.vue reports an error: :null read message, indicating that res is empty, but res is the result returned only after success, here the login failure res is empty, which is correct, so the actual question is why the login failed but entered Successful code???Because of the if judgment, under normal circumstances, code 168 should not be executed, and it should directly enter the else console to print "wrong, wrong", and then analyze err.

At the same time, it should be noted that if the code execution reports an error, the following code will not be executed, so the loading status of the login button has not yet been set to false, so the login button is always loading and this error is also caused.

error correction process

Open the network and see what is the response data given by the background?

 It turns out that this is not null. After scratching my head and finding mistakes, I finally realized that in the response interceptor of the code, I have processed the data returned by the background, so I went to the response interceptor

 Because the status code given to me in the background is 200 regardless of success or failure. So the interceptor will not enter the err, it is all in the response, analyze the response and find that the reject method of the return in the login failed else has no parameters, so it is not Is it null?

Quickly give a parameter to try:

 Running: The world is finally calm........