[Axios] 타임아웃 설정하기

Axios를 사용하여 요청에 타임아웃을 설정하는 방법은 timeout 옵션을 활용하는 것입니다. 이 옵션을 사용하여 요청의 최대 대기 시간을 설정할 수 있습니다. 만약 타임아웃 시간이 초과되면 요청은 실패로 처리됩니다.

다음은 Axios를 활용하여 타임아웃을 설정하는 예시입니다:

import axios from 'axios';

// 타임아웃을 5초로 설정
const timeout = 5000;

axios.get('/api/data', { timeout })
  .then(response => {
    // 요청이 성공적으로 완료되었을 때 처리할 로직
    console.log(response.data);
  })
  .catch(error => {
    // 타임아웃 또는 요청 실패 처리할 로직
    if (error.code === 'ECONNABORTED') {
      console.log('요청이 타임아웃되었습니다.');
    } else {
      console.error('요청 실패:', error);
    }
  });

위의 예시에서는 Axios 요청 설정 객체에 timeout 옵션을 추가하여 타임아웃 시간을 설정합니다. 위 예시에서는 타임아웃을 5초로 설정하였습니다.

요청이 지정된 타임아웃 시간 내에 완료되면 성공적인 응답을 받을 수 있습니다. 그러나 타임아웃 시간을 초과하면 요청은 실패로 처리되며, catch 블록에서 해당 실패를 처리할 수 있습니다. 타임아웃으로 인한 실패는 error 객체의 code 속성이 'ECONNABORTED'인지 확인하여 구분할 수 있습니다.

위의 예시에서는 GET 요청을 기준으로 설명했지만, 타임아웃 설정은 다른 HTTP 메서드 및 Axios의 다른 요청 메서드에도 적용할 수 있습니다. 타임아웃 설정은 요청에 대한 응답이 너무 오래 걸릴 수 있는 상황에서 유용하게 활용될 수 있습니다.