Axios, Fetch로 온라인/오프라인 상태 체크 가능할까?

axios 나 fetch와 같은 네트워크 관련 라이브러리로 온라인 상태 체크 불가능.

 

서버의 응답이 오지 않는 것은 체크할 수 있지만

이것이 네트워크가 온프라인 상태라는 것은 100% 장담할 수 없으므로 

제3의 라이브러리를 이용한 방법을 사용하는 것이 좋다.

 

브라우저 - Navigator.onLine

if (navigator.onLine) {
  console.log('온라인');
}

 

ReactNative - NetInfo

import NetInfo from '@react-native-community/netinfo';
const networkState = await NetInfo.fetch();
if(networkState.isConnected) }{
	console.log("온라인")
}

 

Axios

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 서버에서 받은 응답의 상태코드(status) 2xx 아닌 경우.
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 요청을 보냈지만 응답받지 못 한 경우.
      // `error.request`는 브라우저에서 XMLHttpRequest, 노드에서 http.ClientRequest 객체
      console.log(error.request);
    } else {
      // 요청 설정에서 생긴 에러.
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

 

[참고]

https://github.com/axios/axios#handling-errors

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine