React-Native 那些坑之 NetInfo.getConnectionInfo()

关键词: React-Native iOS NetInfo  getConnectionInfo()

最近后台增加了一个新需求， 需要增加一个网络状态加进header里面方便数据统计， 很快就查到RN 有个NetInfo的类专门处理这个需求的， 本来以为很简单就一下子完事的， 没想到还是踩了一个非常隐蔽的坑

由于混杂着其他需求一起发了个测试版本，导致这个问题debug了一个上午才发现

问题在于 await getConnectionInfo() 如果在短时间内调用多次， 会导致一直在等待回调，导致请求一直无法发送出去， (为啥会短时间内调用多次？这又涉及到axios的另一个坑了，以后再研究)， 这个问题只有iOS才发生， android那边一点问题都没有

类似的情况可参考github上面的这个issue：

        https://github.com/facebook/react-native/issues/19039

解决办法很简单，自己封装一下方法就可以了，代码如下：

async function getConnectionInfo() {

  if (Platform.OS === 'ios') {

    return new Promise((resolve, reject) => {

      const connectionHandler = connectionInfo => {

        NetInfo.removeEventListener('connectionChange', connectionHandler)

        resolve(connectionInfo)

      }

      NetInfo.addEventListener('connectionChange', connectionHandler)

    })

  }

  return NetInfo.getConnectionInfo()

}