[react native] axios timeout not working

axios config에서 timeout이라는 키로 ms 를 전달하면
지정한 시간보다 통신이 더 오래 걸리면 요청을 중단 시킬수 있습니다.

예를 들면
1. 인스턴스를 생성하면 timeout값은 디폴트값인 0으로 지정되어 있습니다.
2. 인스턴스의 디폴트값을 바꿔줄수도 있습니다.
3. axios config를 전달할때 timeout키에 시간을 전달하면 타임아웃시간을 지정할 수 있습니다.

const instance = axios.create();

instance.defaults.timeout = 2500;

instance.get('/longRequest', {
  timeout: 5000
});

5초동안 응답이 없으면 요청 중단

이번에 React Native로 작업한 앱에서 axios timeout이 작동하지 않는 이슈가 있어서 CancelToken을 이용한 요청 중단을 적용하고 정리 하였습니다.

1. 요청하는 axios 인스턴스의 CancelToken -> source 를 변수에 저장

   • const source instance.CancelToken.source()

2. source.token을 요청하는 axios config의 cancelToken에 전달

   • instance('/longRequest', { cancelToken: source.token })

3. setTimeout을 이용해 요청 취소

   • const timer = setTimeout(() => {
         source.cancel();
         return Promise.reject('timeout');
     }, 10000);

4. 요청 성공시 clearTimeout을 이용해 취소 로직 해제

   • clearTimeout(timer)

최종 코드

const instance = axios.create();
const source = instance.CancelToken.source()

const aget = async (url: string) => {
  	const timer = setTimeout(() => {
	    source.cancel();
    	return Promise.reject('timeout');
	}, 10000);
  
  	const axiosConfig = {
     	url: url,
      	method: "get",
      	cancelToken: source.token
    }
  
	try {
	  	const response = instance(axiosConfig)
        
        clearTimeout(timer)
      	return response.data
    } catch (err) {
      	clearTimeout(timer)
      	return Promise.reject(err.response?.data);
    }
}

clearTimeout은 정상적으로 반환값이 도착했거나,
error 값이 도착했으면 시간초과는 확인할 필요가 없기 때문에 사용하였습니다.