ReactNative踩坑日志——使用async/await语法解决网络请求的异步导致的指令执行顺序错乱问题

    转载请注明原文地址：    

    ReactNative的fetch是天然的异步请求，因此，如果你在一个代码块中使用了fetch，那么在执行的时候程序不会等待网络响应结束才执行下一条代码，而是会直接按顺序执行完整个代码块。而这样的话，某些具有先后条件的代码就会存在结果混乱等问题。

比如：一个登录方法

doLogin(){
       //1:根据输入的工号、密码进行登录
        fetch(this.hostIP + "/login?user="+this.user+"&password="+this.password).then((response) => response.json())
            .then((json) => {
               //处理响应
              this.isLogin = true
            }).catch((error) => {
            alert("登录失败，请检查网络连接！")
        })
       
       //2:根据登录结果控制跳转
      if(isLogin){
      this.props.navigation.navigate('Menu')
    }else{
      alert("登录失败")
    }
}

理论上，我们的执行逻辑是先用fetch进行登录，然后根据后台返回结果，控制跳转或弹出失败提示。

然而上述代码在执行时就会出现一旦点击登录按钮就会立刻弹出“登录失败”的提示，等再次点击登录按钮，却又跳转到了主页面。

原因就是因为，第一次点击登录按钮时，fetch异步执行，结果还没有返回，而RN已经执行到下面的if-else代码块了，因此登录失败。

而再次点击时，上一次的fetch结果已经返回了，所以if-else语句就会根据上一次点击时的fetch结果作为判断条件来执行了。

 

那么，怎么解决呢？ES7提供了终极异步解决方案——async/await语法

我们可以在定义一个含有异步操作的方法时，在其前面加上 async 关键字，标示该方法是异步方法；

而在方法中，使用 await  关键字修饰异步操作，该关键字的作用时：等待该语句执行完毕才执行下一条代码。

这样，我们在具有先后条件限制的代码块中，用await关键字修饰其中的异步代码，即可保证按照顺序执行，从而得到正确的结果了。

改进后的登录方法：

async doLogin(){
       //1:根据输入的工号、密码进行登录
        await fetch(this.hostIP + "/login?user="+this.user+"&password="+this.password).then((response) => response.json())
            .then((json) => {
               //处理响应
              this.isLogin = true
            }).catch((error) => {
            alert("登录失败，请检查网络连接！")
        })
       
       //2:根据登录结果控制跳转
      if(isLogin){
      this.props.navigation.navigate('Menu')
    }else{
      alert("登录失败")
    }
}