前言

今天，在处理一个业务的时候，遇到一个问题，让我十分困惑，但是后面自己才反应过来，是异步引起的...脑筋太慢了，对于前端知识掌握还是不足...

问题：在js中使用if进行判断的时候，if中的条件方法还没执行判断结束，就直接跳到执行else的代码了...

问题

业务场景：

需要通过调用调用接口判断当前的状态，并且在不同状态下响应不同的业务逻辑。

首先，一开始我的想法是，使用一个函数，将调用接口判断状态的代码放在这个函数中间，同时这个函数返回一个布尔类型的值。具体示例：

function is(){
    axios({                //使用axios对后端发起请求
            发起请求
        }).then(res => {
            if (状态) {
                return true
            } else {
                return false
            }
        })
}

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {     //判断是否需要校验权限
        if(is()){
            next()            //正常执行
        }else{
            //如果状态错误，执行另外的业务逻辑。            
        }
    }
    else {
        ...
    }
});

一开始我以为上面的代码没有什么问题，乍一看也是正常。

但是运行的时候，无论后端返回的状态是什么，都是直接执行了else中的代码。

解决方案

过了一段时间，我才反应过来，调用axios执行的时候是异步执行的，因此，在执行到 if 语句的时候，调用到 is() 方法，axios还没执行完，还没获取到返回值，程序就继续往下走了，所以也就理所当然的执行了else后面的语句。

实际解决方案:

function test(){
    if (to.meta.requireAuth) { 
        axios({            //使用axios对后端发起请求
            //发起请求
        }).then(res => {
            if (这里直接对res返回的数据进行判断) {
                ...执行业务逻辑
            } else {
                ...执行业务逻辑
            }
        })
    }
    else {
        next();
    }
}

直接将需要执行的业务逻辑，放在进行完axios请求后面的then中，确保，在执行完axios请求后执行指定的业务逻辑。