Axios 대 Fetch: HTTP 요청에 가장 적합한 것은 무엇인가?

HTTP 요청는 서버 및 API와의 통신에서 필수적입니다. JavaScript에서 HTTP 요청을 수행하는 방법은 여러 가지가 있지만, 가장 인기 있는 두 가지는 Axios와 fetch()입니다. 이 게시물에서는 Axios와 Fetch()를 비교하고 서로 다른 상황에 가장 적합한 것을 살펴보겠습니다.

Axios란?

Axios는 HTTP 요청을 수행하기 위한 promise 기반 HTTP 클라이언트를 제공하는 서드파티 라이브러리입니다. Axios는 JavaScript 커뮤니티에서 널리 사용되며, 단순성과 유연성으로 잘 알려져 있습니다.

Axios의 기본 문법

Axios 라이브러리의 기본 문법은 다음과 같습니다:

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

주요 기능:

1. URL과 구성을 포함하는 객체를 매개변수로 받을 수 있으며, 또는 별도의 URL 및 구성 객체를 사용할 수 있습니다.
2. data 속성을 사용하여 서버에 데이터를 전송하며, 자동으로 JSON 변환을 처리합니다.
3. 응답 객체의 data 속성에서 서버 데이터를 직접 반환합니다.
4. HTTP 오류 상태 코드를 자동으로 처리하며, catch 블록으로 전달합니다.
5. 보다 간소화된 오류 처리 메커니즘을 제공합니다.

예시:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: {
    key: 'value'
  }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('서버가 응답했습니다:', error.response.status);
    } else if (error.request) {
      console.error('응답을 받지 못했습니다.');
    } else {
      console.error('오류:', error.message);
    }
  });

Axios를 사용해야 하는 이유는 무엇인가요?

다음과 같은 여러 기능이 있어 사용하기 쉽고 편리합니다:

• 자동 JSON 데이터 변환: Axios는 데이터를 자동으로 JSON 형식으로 변환하므로 수동으로 파싱하거나 문자열로 변환할 필요가 없습니다.
• 응답 시간 초과: Axios는 요청의 시간 초과를 설정할 수 있어, 서버의 응답이 너무 오래 걸릴 경우 오류를 처리할 수 있습니다.
• HTTP 인터셉터: Axios는 요청과 응답을 처리하기 전에 가로채어 수정하거나 추가 로직을 추가할 수 있습니다.
• 다운로드 진행률: Axios는 다운로드 및 업로드 진행도를 추적할 수 있어, 사용자에게 피드백을 제공하거나 필요에 따라 요청을 취소할 수 있습니다.
• 동시 요청: Axios는 여러 요청을 동시에 수행하고, axios.all 및 axios.spread를 사용하여 하나의 응답으로 결합할 수 있습니다.

Fetch()란?

fetch()는 네이티브 JavaScript와 함께 제공되는 내장 API입니다. 비동기 웹 API로서 데이터를 promises 형태로 반환합니다. fetch()는 모든 최신 브라우저에서 지원되므로 외부 라이브러리를 가져올 필요가 없습니다. fetch()의 일부 기능은 다음과 같습니다:

• 기본 문법: fetch()는 가져오고자 하는 리소스의 URL을 첫 번째 인수로, 선택적 옵션 객체를 두 번째 인수로 받는 간단하고 간결한 문법을 가지고 있습니다.
• 하위 호환성: fetch()는 whatwg-fetch나 fetch-ponyfill과 같은 polyfill을 사용하여 하위 버전의 브라우저에서 사용할 수 있습니다.
• 사용자 지정 가능: fetch()는 요청 및 응답에서 더 많은 제어 권한을 제공하여, 헤더, 본문, 메서드, 모드, 자격 증명, 캐시, 리디렉션 및 참조 정책을 사용자 지정할 수 있습니다.

HTTP 요청을 만들기 위해 Axios를 사용하는 방법은?

Axios를 사용하려면 npm 또는 yarn을 사용하여 설치해야 합니다:

npm install axios

yarn을 사용하여 Axios를 설치하는 방법은 다음과 같습니다:

yarn add axios

pnpm을 사용하는 경우 다음 명령어로 Axios를 설치할 수 있습니다:

pnpm install axios

또는 콘텐츠 전송 네트워크(CDN)를 사용하여 프로젝트에 Axios를 포함할 수 있습니다. 다음은 CDN을 사용하여 Axios를 포함하는 방법입니다:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

그런 다음 JavaScript 파일에서 가져와 HTTP 요청을 수행하는 데 사용할 수 있습니다. 예를 들어, URL에 GET 요청을 수행하려면 axios.get()을 사용하면 됩니다:

import axios from 'axios';

axios.get('https://example.com/api')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Fetch로 HTTP 요청 만들기

fetch()를 사용하려면 이미 브라우저에서 사용 가능하므로 아무것도 설치할 필요가 없습니다. fetch() 함수를 사용하여 HTTP 요청을 수행할 수 있습니다. 예를 들어, URL에 GET 요청을 하려면 다음과 같이 fetch()를 사용할 수 있습니다:

fetch('https://example.com/api')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

다음 사항에 유의하세요:

• Axios는 데이터를 자동으로 JSON 형식으로 변환하는 반면, fetch()는 response.json()을 호출하여 데이터를 JavaScript 객체로 변환해야 합니다.
• Axios는 응답 객체에서 데이터를 제공하는 반면, fetch()는 상태, 헤더 및 URL과 같은 다른 정보를 포함하는 응답 객체 자체를 제공합니다.
• Axios는 catch 블록에서 오류를 처리하는 반면, fetch()는 네트워크 오류가 발생할 때만 프로미스를 거부하고, 응답이 오류 상태인 경우에는 거부하지 않습니다.

Fetch의 기본 문법

물론입니다. 요청하신 대로 두 부분으로 나눠 영어 내용을 제공하겠습니다.

Fetch API의 기본 문법은 다음과 같습니다:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('오류:', error));

주요 기능:

1. URL을 첫 번째 인수로, 선택적 구성 객체를 두 번째 인수로 사용합니다.
2. body 속성을 사용하여 서버에 데이터를 전송하며, 데이터의 문자열 변환이 수동으로 필요합니다.
3. 응답 정보가 포함된 Response 객체를 반환합니다.
4. 네트워크 오류가 발생해야만 catch 블록에 들어가며, HTTP 오류 상태 코드에서는 들어가지 않습니다.
5. HTTP 오류를 처리하기 위해 응답 상태 코드를 수동으로 확인해야 합니다.

예시:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP 오류 ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('오류:', error));

Axios vs Fetch: 쿼리 매개변수가 있는 GET 요청 전송:

// Axios
axios.get('/api/data', {
  params: {
    name: 'Alice',
    age: 25
  }
})
.then(response => {
  // 응답 처리
})
.catch(error => {
  // 오류 처리
});

// Fetch
const url = new URL('/api/data');
url.searchParams.append('name', 'Alice');
url.searchParams.append('age', 25);

fetch(url)
.then(response => response.json())
.then(data => {
  // 데이터 처리
})
.catch(error => {
  // 오류 처리
});

Axios vs Fetch: JSON 본문이 있는 POST 요청 전송:

// Axios
axios.post('/api/data', {
  name: 'Bob',
  age: 30
})
.then(response => {
  // 응답 처리
})
.catch(error => {
  // 오류 처리
});

// Fetch
fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Bob',
    age: 30
  })
})
.then(response => response.json())
.then(data => {
  // 데이터 처리
})
.catch(error => {
  // 오류 처리
});

Axios vs Fetch: 요청에 대한 시간 초과 설정:

// Axios
axios.get('/api/data', {
  timeout: 5000 // 5초
})
.then(response => {
  // 응답 처리
})
.catch(error => {
  // 오류 처리
});

// Fetch
const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => {
  controller.abort(); // 5초 후 중단
}, 5000);

fetch('/api/data', { signal })
.then(response => response.json())
.then(data => {
  // 데이터 처리
})
.catch(error => {
  // 오류 처리
});

Axios vs Fetch: async/await 문법 사용:

// Axios
async function getData() {
  try {
    const response = await axios.get('/api/data');
    // 응답 처리
  } catch (error) {
    // 오류 처리
  }
}

// Fetch
async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // 데이터 처리
  } catch (error) {
    // 오류 처리
  }
}

Axios vs Fetch: 하위 호환성

하위 호환성이란 새로운 시스템이나 애플리케이션이 구 버전과 함께 작동할 수 있는 능력을 의미하며, 업그레이드 시 매끄러운 전환과 중단 또는 고장을 방지하는 데 중요합니다. 이는 소프트웨어 개발, 웹 개발, 기술 생태계에서 안정성, 호환성 및 일관된 버전과 플랫폼 유지를 위해 중요합니다.

Axios:

• Axios는 프로젝트에 설치하고 포함해야 하는 서드파티 라이브러리입니다.
• Promise 및 기타 최신 JavaScript 기능에 대한 polyfill을 포함하여 구형 브라우저를 지원합니다.
• Axios는 적극적으로 유지 관리되며 최신 브라우저 및 Node.js 업데이트를 따라가며 새로운 환경과의 호환성을 보장합니다.
• 그러나 별도의 라이브러리이므로 프로젝트 종속성과 호환되는 버전을 사용해야 합니다.

Fetch:

• Fetch API는 최신 브라우저에서 지원되는 네이티브 웹 API입니다.
• 최근 브라우저 버전에서 우수한 지원을 받지만, 구형 브라우저(예: Internet Explorer)는 네이티브로 지원하지 않습니다.
• 구형 브라우저를 지원해야 하는 경우, polyfill을 포함하거나 대체 솔루션(XMLHttpRequest 등)을 사용해야 합니다.
• 네이티브 API로서 브라우저 공급업체에 의해 자동으로 업데이트되고 유지 관리되어 향후 브라우저 버전과의 호환성을 보장합니다.

Axios vs Fetch: 오류 처리

오류 처리는 HTTP 요청을 만드는 데 중요한 측면으로, 네트워크 실패, 서버 오류 또는 잘못된 응답과 같은 다양한 시나리오를 처리할 수 있습니다. Fetch와 Axios는 오류를 처리하는 방법이 다르며, 몇 가지 예를 통해 비교하겠습니다.

Axios:

Axios에서는 요청 실패가 발생하면 오류를 발생시키고, try-catch 블록으로 쉽게 오류를 처리하며 error.response.data에서 오류 데이터를 가져올 수 있습니다. 예를 들어:

// Axios 오류 처리: try-catch
try {
  const response = await axios.get('/api/data');
  // 응답 처리
} catch (error) {
  // 오류 처리
  console.log(error.response.data);
}

Fetch:

Fetch에서는 요청 실패가 발생하면 오류를 발생시키지 않고, ok 속성이 false로 설정된 응답 객체를 반환합니다. ok 속성을 확인하고 try-catch 블록을 사용하려면 수동으로 오류를 발생시켜야 합니다.

또는 response.ok 속성을 사용하여 then 방법에서 다양한 경우를 처리할 수 있습니다. 예를 들어:

// Fetch 오류 처리: try-catch
try {
  const response = await fetch('/api/data');
  // 응답 상태 확인
  if (!response.ok) {
    // 상태가 ok가 아닐 경우 오류 발생
    throw new Error(`HTTP 오류! 상태: ${response.status}`);
  }
  // 응답 처리
} catch (error) {
  // 오류 처리
  console.log(error.message);
}

// Fetch 오류 처리: response.ok
fetch('/api/data')
  .then(response => {
    // 응답 상태 확인
    if (response.ok) {
      // 응답 처리
    } else {
      // 오류 처리
      console.log(`HTTP 오류! 상태: ${response.status}`);
    }
  })
  .catch(error => {
    // 네트워크 오류 처리
    console.log(error.message);
  });

Fetch와 Axios 간의 또 다른 차이점은 비-200 상태 코드를 처리하는 방식입니다. Axios는 2xx 범위 밖의 모든 상태 코드를 오류로 간주하고 프로미스를 거부합니다. Fetch는 유효한 HTTP 응답(심지어 4xx 또는 5xx 포함)을 성공으로 간주하고 프로미스를 해결합니다.

이로 인해 비-200 상태 코드를 Fetch와 Axios에서 다르게 처리해야 합니다. 예를 들어:

// Axios 비-200 상태 코드에 대한 오류 처리
axios.get('/api/data')
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    // 오류 처리
    if (error.response) {
      // 서버가 2xx 범위 밖의 상태 코드로 응답했습니다
      console.log(error.response.status);
      console.log(error.response.data);
    } else {
      // 네트워크 오류 또는 요청이 중단되었다
      console.log(error.message);
    }
  });

// Fetch 비-200 상태 코드에 대한 오류 처리
fetch('/api/data')
  .then(response => {
    // 응답 상태 확인
    if (response.ok) {
      // 응답 처리
    } else {
      // 서버가 2xx 범위 밖의 상태 코드로 응답했습니다
      console.log(response.status);
      return response.json();
    }
  })
  .then(data => {
    // 오류 데이터 처리
    console.log(data);
  })
  .catch(error => {
    // 네트워크 오류 또는 요청이 중단되었다
    console.log(error.message);
  });

Axios vs Fetch: 어떤 것이 HTTP 요청을 만드는 데 가장 좋은가요?

어떤 것이 더 좋은지에 대한 명확한 답변은 없으며, 이는 개인의 취향과 필요에 따라 다릅니다. 그러나 결정을 내리는 데 도움이 되는 몇 가지 일반적인 지침은 다음과 같습니다:

• Axios를 사용하면 자동 JSON 데이터 변환, 응답 시간 초과, HTTP 인터셉터, 다운로드 진행, 동시 요청과 같은 기능이 있어 단순하고 편리하게 HTTP 요청을 만들 수 있습니다.
• fetch()를 사용하면 하위 호환성, 사용자 정의 헤더, 본문, 메서드, 모드, 자격 증명, 캐시, 리디렉션 및 참조 정책과 같은 기능이 있는 네이티브 및 사용자 지정 가능 방식으로 HTTP 요청을 만들 수 있습니다.

Apidog로 Axios/Fetch 코드 생성하기

Apidog는 올인원 협업 API 개발 플랫폼으로, API 디자인, 디버깅, 테스트, 게시 및 모킹을 위한 종합적인 툴킷을 제공합니다. Apidog는 HTTP 요청을 만들기 위한 Axios 코드를 자동으로 생성할 수 있도록 해줍니다.

여기 Apidog를 사용하여 Axios 코드를 생성하는 과정이 있습니다:

1단계: Apidog를 열고 새 요청을 선택합니다.

2단계: 요청을 보낼 API 엔드포인트의 URL을 입력하고, 원하시는 헤더나 쿼리 문자열 매개변수를 입력한 후, "디자인"을 클릭하여 Apidog의 디자인 인터페이스로 전환합니다.

3단계: "클라이언트 코드 생성"을 선택하여 코드를 생성합니다.

4단계: 생성된 Axios 코드를 복사하여 프로젝트에 붙여넣습니다.

HTTP 요청 전송을 위한 Apidog 사용하기

Apidog는 HTTP 요청을 테스트하는 능력을 더욱 향상시키는 여러 고급 기능을 제공합니다. 이러한 기능은 요청을 사용자 지정하고 보다 복잡한 시나리오를 손쉽게 처리할 수 있도록 해줍니다.

button

1단계: Apidog를 열고 새 요청을 만듭니다.

2단계: 만들고자 하는 POST 요청에 대한 API 세부정보를 찾거나 수동으로 입력합니다.

3단계: 필요한 매개변수와 요청 본문에 포함할 데이터를 입력합니다.

결론

Axios와 fetch()는 JavaScript에서 HTTP 요청을 만드는 강력하고 신뢰할 수 있는 방법입니다. 프로젝트와 스타일에 더 적합한 방법을 선택하거나, 서로 다른 목적에 대해 두 가지 모두 사용할 수도 있습니다. 중요한 것은 두 방법을 이해하고 효과적으로 사용하는 것입니다.

Apidog를 사용하면 소중한 시간과 노력을 절약할 수 있을 뿐만 아니라, 코드의 정확성과 오류 없음을 보장합니다. 사용자 친화적인 인터페이스와 직관적인 기능으로 인해 Apidog는 Axios 요청을 사용하는 모든 개발자에게 필수적인 도구입니다. 행복한 코딩 되세요!

button