API 요청이 시간 초과되어 "요청이 실패했습니다 (상태 코드 408)" 또는 "네트워크 오류"와 같은 오류가 발생하는 좌절감을 느껴본 적이 있나요?

Axios의 타임아웃 옵션은 오류를 발생시키기 전에 서버 응답을 기다릴 시간을 지정할 수 있도록 하여 애플리케이션이 무한정 멈추는 것을 방지합니다.

하지만 올바른 타임아웃 값을 선택하고 타임아웃을 우아하게 처리하는 것은 어려울 수 있습니다. 이럴 때 Apidog, API 테스트 및 디버깅 플랫폼이 타임아웃이 있는 axios 요청을 테스트하고 디버깅할 수 있습니다.

💡

타임아웃이 있는 axios 요청을 테스트하고 디버깅하려면 Apidog를 사용해 보세요. API 설계, 디버깅, 개발, 모방 및 테스트를 무료로 통합된 플랫폼에서 제공합니다.

버튼

Axios 타임아웃이란 무엇이며 왜 중요한가

axios 타임아웃을 처리하는 방법의 세부 사항에 대해 설명하기 전에 먼저 그것이 무엇인지와 왜 중요한지를 이해합시다.

Axios 타임아웃은 axios가 요청을 중단하고 오류를 던지기 전에 서버의 응답을 기다리는 최대 시간을 의미합니다. axios의 기본 타임아웃 값은 0이며, 이는 타임아웃이 없음을 의미하며 axios가 무한정 응답을 기다린다는 것을 뜻합니다.

타임아웃 값을 설정함으로써, 특정 시간 후에 요청을 포기하도록 axios에게 지시하고 오류를 던질 수 있습니다. 이렇게 하면 코드에서 오류를 처리하고 사용자에게 오류 메시지나 로딩 표시기를 보여주거나 페이지를 새로 고치라고 요청하는 등의 대안 옵션을 제공할 수 있습니다:

오류 메시지나 로딩 표시기를 보여주기
사용자에게 재시도하거나 페이지를 새로 고치라고 요청하기
사용자를 다른 페이지나 서비스로 리디렉션하기
오류를 기록하거나 개발자에게 알림 보내기

오류를 처리함으로써 사용자 경험을 향상시키고 리소스를 절약하며 보안 위험을 방지할 수 있습니다. 또한 불필요하거나 중복되는 요청을 피하고 애플리케이션 성능을 최적화할 수 있습니다.

하지만 axios에서 타임아웃 값을 어떻게 설정할까요? 오류가 발생했을 때 이를 어떻게 처리할 수 있을까요? 다음 섹션에서 살펴보겠습니다.

Axios에서 타임아웃 옵션 설정하기

axios에서 타임아웃 옵션을 설정하는 것은 매우 쉽고 간단합니다. axios 요청 메서드에 전달하는 config 객체의 속성으로 밀리초 단위의 타임아웃 값을 지정할 수 있습니다. 예를 들어, 특정 API 엔드포인트에 대해 GET 요청의 타임아웃 값을 5초(5000밀리초)로 설정하려면 다음과 같이 작성할 수 있습니다:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // 성공 처리
  })
  .catch(error => {
    // 오류 처리
  });

대안으로, axios.defaults 객체를 사용하여 모든 axios 요청에 대해 전역적으로 타임아웃 값을 설정할 수도 있습니다. 예를 들어, 모든 axios 요청에 대해 타임아웃 값을 5초로 설정하려면 다음과 같이 작성할 수 있습니다:

axios.defaults.timeout = 5000;

타임아웃 값을 가진 axios 인스턴스를 생성하여 특정 요청에 사용할 수도 있습니다. 예를 들어, 타임아웃 값을 10초로 설정된 axios 인스턴스를 생성하여 일부 요청에 사용하려면 다음과 같이 작성할 수 있습니다:

const instance = axios.create({timeout: 10000});

instance.get('/api/products')
  .then(response => {
    // 성공 처리
  })
  .catch(error => {
    // 오류 처리
  });

보시다시피, axios에서 타임아웃 옵션을 설정하는 것은 매우 간단하고 유연합니다. 필요와 선호도에 따라 다른 요청에 맞게 사용자 정의할 수 있습니다.

그렇다면 요청에 대해 올바른 타임아웃 값을 어떻게 선택할까요? 포기하기 전에 얼마나 기다려야 할까요? 이 질문에 대한 확정적인 답은 없으며, 요청의 유형이나 목적, 서버와 네트워크의 속도와 신뢰성, 사용자 기대치와 인내 수준, 대체 옵션의 가용성 및 실행 가능성과 같은 여러 요인에 따라 달라집니다.

하지만 타임아웃 값에 도달하고 요청이 중단되면 어떤 일이 발생할까요? axios에서 타임아웃 오류를 포착하고 처리하는 방법은 무엇일까요? 다음 섹션에서 살펴보겠습니다.

Axios에서 타임아웃 오류를 포착하고 처리하는 방법

타임아웃 값에 도달하고 요청이 중단되면 axios는 오류를 발생시키며, 이를 코드에서 포착하고 처리할 수 있습니다. axios 요청을 작성하는 방식에 따라 try/catch, 프로미스 또는 async/await를 사용하는 등 다양한 방법으로 오류를 포착하고 처리할 수 있습니다.

try/catch 사용하기

axios 요청을 작성할 때 try/catch를 사용하는 경우, catch 블록에서 오류를 포착하고 적절히 처리할 수 있습니다. 예를 들어, 특정 API 엔드포인트에 GET 요청을 하고 타임아웃 값을 5초로 설정하는 try/catch 블록을 사용하는 경우, 다음과 같이 작성할 수 있습니다:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // 성공 처리
} catch (error) {
  // 오류 처리
}

그렇다면 오류가 타임아웃 오류인지 다른 유형의 오류인지 어떻게 알 수 있을까요? 이를 확인하는 한 가지 방법은 오류 코드 속성을 사용하는 것입니다. 오류가 타임아웃 오류인 경우 'ECONNABORTED'로 설정됩니다. 예를 들어, 다음과 같이 작성할 수 있습니다:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // 성공 처리
} catch (error) {
  // 오류 처리
  if (error.code === 'ECONNABORTED') {
    // 타임아웃 오류 처리
    console.error('요청 시간이 초과되었습니다');
    // 오류 메시지나 재시도 버튼과 같은 다른 작업 수행
  } else {
    // 다른 유형의 오류 처리
    console.error(error.message);
    // 오류를 기록하거나 알림을 보내는 것과 같은 다른 작업 수행
  }
}

보시다시피, try/catch를 사용하는 것은 axios에서 타임아웃 오류를 포착하고 처리하는 간단하고 효과적인 방법입니다. 그러나 async/await 문법을 사용해야 하며, 이는 일부 브라우저나 환경에서 지원되지 않을 수 있습니다. axios 요청을 작성하는 더 호환 가능하고 전통적인 방법을 사용하고 싶다면 프로미스를 대신 사용할 수 있습니다.

프로미스 사용하기

axios 요청을 작성할 때 프로미스를 사용하는 경우, catch 메서드에서 오류를 포착하고 적절히 처리할 수 있습니다. 예를 들어, 특정 API 엔드포인트에 GET 요청을 하고 타임아웃 값을 5초로 설정하는 프로미스 체인을 사용하는 경우, 다음과 같이 작성할 수 있습니다:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // 성공 처리
  })
  .catch(error => {
    // 오류 처리
  });

오류가 타임아웃 오류인지 확인하려면, 이전과 같이 같은 오류 코드 속성을 사용하고 이를 'ECONNABORTED'와 비교하면 됩니다. 예를 들어, 다음과 같이 작성할 수 있습니다:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // 성공 처리
  })
  .catch(error => {
    // 오류 처리
    if (error.code === 'ECONNABORTED') {
      // 타임아웃 오류 처리
      console.error('요청 시간이 초과되었습니다');
      // 오류 메시지나 재시도 버튼과 같은 다른 작업 수행
    } else {
      // 다른 유형의 오류 처리
      console.error(error.message);
      // 오류를 기록하거나 알림을 보내는 것과 같은 다른 작업 수행
    }
  });

보시다시피, 프로미스를 사용하는 것은 axios에서 타임아웃 오류를 포착하고 처리하는 또 다른 쉽고 친숙한 방법입니다. 그러나 이로 인해 중첩되고 장황한 코드가 발생할 수 있으며, 특히 일련의 여러 axios 요청이 순차적으로 또는 병렬로 있는 경우에는 더 심해질 수 있습니다. axios 요청을 작성하는 보다 현대적이고 우아한 방법을 사용하고 싶다면 async/await을 사용할 수 있습니다.

async/await 사용하기

axios 요청을 작성할 때 async/await를 사용하는 경우, try/catch 블록에서 오류를 포착하고 적절히 처리할 수 있습니다. 이는 우리가 앞서 본 것과 동일한 방법이며, 여기서 완전성을 위해 반복하겠습니다. 예를 들어, 특정 API 엔드포인트에 GET 요청을 하고 타임아웃 값을 5초로 설정된 async 함수를 사용하는 경우, 다음과 같이 작성할 수 있습니다:

async function getUsers() {
  try {
    const response = await axios.get('/api/users', {timeout: 5000});
    // 성공 처리
  } catch (error) {
    // 오류 처리
    if (error.code === 'ECONNABORTED') {
      // 타임아웃 오류 처리
      console.error('요청 시간이 초과되었습니다');
      // 오류 메시지나 재시도 버튼과 같은 다른 작업 수행
    } else {
      // 다른 유형의 오류 처리
      console.error(error.message);
      // 오류를 기록하거나 알림을 보내는 것과 같은 다른 작업 수행
    }
  }
}

보시다시피, async/await를 사용하는 것은 axios에서 타임아웃 오류를 포착하고 처리하는 깔끔하고 간결한 방법입니다. 그러나 async/await 구문을 사용해야 하며, 이는 일부 브라우저나 환경에서 지원되지 않을 수 있습니다. axios 요청을 작성하는 더 호환 가능하고 전통적인 방법을 사용하고 싶다면 프로미스를 대신 사용할 수 있습니다.

이것들이 axios에서 타임아웃 오류를 포착하고 처리하는 세 가지 주요 방법입니다: try/catch, 프로미스 또는 async/await. 자신의 선호와 상황에 가장 적합한 방법을 선택하고 코드 전반에 걸쳐 일관되게 사용할 수 있습니다.

그렇다면 타임아웃이 있는 axios 요청을 어떻게 테스트하고 디버깅할까요?

Apidog를 사용하여 타임아웃이 있는 axios 요청을 테스트하고 디버깅하는 방법

Apidog 는 API를 설계, 디버깅, 개발, 모방 및 테스트하는 데 도움을 주는 강력하고 사용하기 쉬운 플랫폼입니다. 이 플랫폼은 모든 API 필요에 대한 원스톱 솔루션을 제공하는 많은 기능과 도구를 갖추고 있습니다.

버튼

Apidog를 열고 “새 요청” 버튼을 클릭하여 새 요청을 만듭니다.

요청 세부 정보를 입력할 수 있는 요청 편집기를 볼 수 있으며, 메서드, URL, 헤더, 본문 등을 입력할 수 있습니다.

“전송” 버튼을 클릭하여 요청을 보냅니다.

응답 패널을 보게 되며, 상태, 헤더, 본문, 시간 등의 응답 세부 정보를 확인할 수 있습니다.

Apidog로 쉽게 타임아웃이 있는 axios 요청을 테스트하고 디버깅할 수 있습니다.

결론

이번 블로그 포스트에서는 axios 타임아웃을 전문가처럼 처리하는 방법을 배우고, 사용 가능한 모범 사례와 도구를 활용하여 다음과 같은 내용을 살펴보았습니다:

axios에서 타임아웃 옵션을 설정하고 이를 다양하게 사용자 정의하기
try/catch, 프로미스, async/await를 사용하여 axios에서 타임아웃 오류를 포착하고 처리하기
API 설계, 디버깅, 개발, 모방 및 테스트를 위한 통합 플랫폼인 Apidog를 사용하여 타임아웃이 있는 axios 요청을 테스트하고 디버깅하기

이 단계들을 따르면 웹 애플리케이션의 사용자 경험, 성능 및 보안을 향상시키고, 서버의 응답을 무한정 기다리는 불편함과 번거로움을 피할 수 있습니다.

버튼