API 응답이 너~~무 오래 걸릴 때,뭔가 해주고 싶어 (axios timeout)

제.곧.내. 제목에 써있는 걸 하고 싶은 상황이다.
static error page를 만들어서, 500대 에러일 때 정적인 에러 페이지를 보여주었다. 그리고 API 응답이 너~~무 오래 걸릴 때도 에러 페이지를 보여주고 싶은데, 어떻게 할지 알아보는 중이다.

timeout을 이용하면 되는 것 같다.
axios에서는 timeout 옵션을 사용하여 요청이 얼마나 오래 실행될 수 있는지 설정한다. 이 옵션은 밀리초 단위로 설정할 수 있다. 기본값은 0인데, 요청에 제한 시간이 없다는 것이다.

axios({
  url: 'https://example.com/api/data',
  method: 'get',
  timeout: 5000 // 5초 이내에 응답이 없으면 타임아웃 발생
}).then(res =>{})
.catch(error =>{
    if (error.code ==='ECONNABORTED'){  
        //정적인 에러 페이지 보여주기
    }
})

요청이 타임아웃되면 에러가 발생해서, 에러 처리를 하면 된다. 정적인 에러 페이지로 보낼 수도 있고, 팝업이나 알럿을 띄울 수도 있을 것이다.

이때 에러는 어떤 식으로 생겼을까?

테스트해보려고 timeout 시간을 1로 잡아봤다 ~

보시다시피, errror 의 response가 없어서 주의해야 한다 !
에러 핸들링할 때 조건을 error.code === 'ECONNABORTED' 이런 식으로 했다. (위 코드 참고)

 

참고 자료 

https://velog.io/@jinjoo/Axios-interceptors%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0%EC%97%90%EC%84%9C-timeout-%EC%98%A4%EB%A5%98-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

Axios interceptors(인터셉터)에서 timeout 오류 처리하기

 

https://axios-http.com/kr/docs/config_defaults

Config 기본값 | Axios Docs