웹 프론트엔드 JS 튜토리얼 Axios와 Fetch API? 올바른 HTTP 클라이언트 선택

Axios와 Fetch API? 올바른 HTTP 클라이언트 선택

Dec 02, 2024 am 12:09 AM

TL;DR: Axios와 Fetch API는 인기 있는 HTTP 클라이언트입니다. Axios는 더 많은 기능과 더 쉬운 오류 처리를 제공하는 반면, Fetch API는 가볍고 브라우저에 기본입니다. 복잡한 프로젝트에는 Axios를 선택하고 간단한 프로젝트에는 Fetch를 선택하세요

비동기 HTTP 요청을 처리하는 가장 일반적인 두 가지 방법은 fetch()와 Axios입니다. 일반적인 작업임에도 불구하고 작업하기로 선택한 요청 유형은 앱의 유용성과 전반적인 효율성에 상당한 영향을 미칠 수 있습니다. 그러니 꼼꼼히 따져보고 장단점을 따져보고 선택하는 것이 현명합니다.

이 기사에서는 널리 사용되는 두 가지 도구를 종합적으로 비교하여 프로젝트에 가장 적합한 선택을 내리는 데 도움을 드립니다.

액시오스(Axios)란 무엇입니까?

Axios and Fetch API? Choosing the Right HTTP Client은 브라우저( XMLHttpRequests ) 및 Node.js(HTTP) 환경에서 흔히 볼 수 있는 promise 기반의 타사 HTTP 클라이언트입니다. 요청과 응답을 가로채고, 요청 취소를 수행하고, 응답 데이터를 JSON 형식으로 자동 구문 분석할 수 있는 편리한 API를 제공합니다. Axios는 XSRF(교차 사이트 요청 위조)에 대한 클라이언트 측 보호도 지원합니다. npm과 같은 패키지 관리자를 사용하여 Axios를 설치하거나 CDN을 통해 프로젝트에 추가할 수 있습니다.

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
로그인 후 복사
로그인 후 복사
로그인 후 복사

Axios의 장점

  • 자동 요청 취소
  • 오류 처리, 인터셉터 및 깔끔한 구문이 내장되어 있습니다.
  • 다양한 기존 브라우저와 최신 브라우저와의 호환성.
  • 약속 기반.

Axios의 단점

  • 외부 의존성.
  • 큰 번들 크기와 눈에 띄는 복잡성.

가져오기()란 무엇입니까?

Axios and Fetch API? Choosing the Right HTTP Client

Fetch API도 약속 기반이지만 모든 최신 브라우저에서 사용할 수 있는 기본 JavaScript API입니다. 또한 Node.js 환경과 호환되며 레거시 XMLHttpRequests를 더 간단하고 현대적인 접근 방식으로 대체했습니다. Fetch API는 요청을 보내기 위한 fetch() 메서드를 제공하고 JSON, Blob, FormData와 같은 다양한 요청 및 응답 유형을 지원합니다.

fetch()의 장점

  • 기본 브라우저 지원으로 외부 종속성이 없습니다.
  • 가벼워지고 더욱 간단한 API입니다.
  • 약속 기반.
  • fetch()는 저수준 API입니다. 따라서 더욱 세밀한 제어가 가능합니다.

fetch()의 단점

  • Axios에 비해 오류 처리 및 요청 시간 초과에 대한 내장 기능이 제한되어 있습니다.
  • 일반적인 작업을 위한 자세한 코드.

Axios와 fetch()의 차이점

이제 Axios와 fetch()가 무엇인지 이해했으므로 코드 예제를 통해 이 두 가지의 주요 기능을 비교하고 대조해 보겠습니다.

Axios and Fetch API? Choosing the Right HTTP Client

기본 구문

구문에 관한 한 Axios는 fetch()보다 더 간결하고 개발자 친화적인 구문을 제공합니다.

Axios를 사용한 간단한 POST 요청:

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
로그인 후 복사
로그인 후 복사
로그인 후 복사

fetch()를 사용한 유사한 POST 요청:

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2>Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});
로그인 후 복사
로그인 후 복사

fetch()는 가볍지만 일부 일반적인 작업을 수행하려면 여전히 더 많은 수동 작업이 필요하다는 점에서 상당히 눈에 띕니다. 예를 들어 Axios는 자동 JSON 구문 분석 기능을 제공하며 응답의 데이터 개체에 직접 액세스할 수 있습니다. 반면에 fetch()에서는 JSON 형식에 대한 응답을 수동으로 구문 분석해야 합니다. 제시된 두 접근 방식 모두 유사한 결과를 생성하지만 fetch()에서 오류, 직렬화 및 헤더를 명시적으로 처리해야 합니다.

오류 처리

오류 처리는 개발자가 거의 매일 겪는 일입니다. 예를 들어 Axios는 기본적으로 2xx 범위를 벗어나는 상태 코드가 포함된 모든 HTTP 호출을 오류로 처리합니다. 오류를 관리하고 디버깅하는 데 유용한 설명 개체를 제공합니다.

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});
로그인 후 복사
로그인 후 복사

fetch()는 HTTP 오류(상태 코드 4xx 또는 5xx)를 자동으로 오류로 처리하지 않습니다. 오류를 포착하려면 응답 상태를 식별하기 위해 조건부 검사를 수동으로 수행해야 합니다. 그러나 Axios처럼 정보를 수집하고 오류를 처리하기 위해 프로젝트 내에서 사용자 정의 오류 처리 논리를 가질 수 있습니다.

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

로그인 후 복사
로그인 후 복사

브라우저와의 하위 호환성

Internet Explorer(IE11)와 같은 이전 브라우저나 대부분의 최신 브라우저의 이전 버전 등 레거시 종속성과의 호환성이 필요한 경우 적합한 솔루션은 Axios입니다.

Axios and Fetch API? Choosing the Right HTTP Client

fetch()는 최신 브라우저에 기본으로 제공되며 최신 브라우저와 원활하게 작동합니다. 그러나 일부 이전 브라우저 버전은 지원하지 않습니다. fetch()를 사용하지 않는 브라우저에서 작동하도록 하려면 whatwg-fetch와 같은 폴리필과 함께 사용할 수 있습니다. 그러나 폴리필을 사용하면 번들 크기가 늘어나고 성능에 영향을 미칠 수 있다는 점에 유의하는 것이 중요합니다.

!(https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Fetch-compatibility.png)

HTTP 인터셉터

HTTP 인터셉터를 사용하면 요청과 응답을 가로챌 수 있으며 다음과 같은 경우에 유용합니다.

  • 요청 수정(예: 헤더에 인증을 추가하는 경우)
  • 응답 변환(응답 데이터 전처리).
  • 전역적으로 오류 처리(401 승인되지 않은 경우 로깅 및 리디렉션).

이 강력한 기능은 Axios에서 기본적으로 제공되지만 fetch()에서는 기본적으로 지원되지 않습니다.

Axios를 사용하여 요청에 인증 토큰 추가:

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
로그인 후 복사
로그인 후 복사
로그인 후 복사

그러나 이것이 fetch()가 HTTP 차단을 수행할 수 없다는 의미는 아닙니다. 미들웨어를 사용하여 이 동작을 모방하는 사용자 정의 래퍼를 수동으로 작성할 수 있습니다.

fetch() 래퍼를 사용하여 요청에 인증 토큰 추가:

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2>Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});
로그인 후 복사
로그인 후 복사

응답 시간 초과

응답 시간 초과는 클라이언트가 서버의 응답을 기다리는 시간을 의미합니다. 이 시간 제한에 도달하면 요청이 실패한 것으로 간주됩니다. Axios와 fetch()는 신뢰할 수 없거나 느린 네트워크를 처리할 때 필수적인 요청 시간 제한을 지원합니다. 그럼에도 불구하고 Axios는 타임아웃 관리에 대한 보다 간단한 접근 방식을 제공하여 선두를 달리고 있습니다.

Axios의 요청 시간 초과:

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});
로그인 후 복사
로그인 후 복사

fetch()를 사용한 요청 시간 초과:

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

로그인 후 복사
로그인 후 복사

Axios는 타임아웃 옵션을 사용하여 더욱 깔끔한 코드로 타임아웃을 더욱 간단하고 우아하게 처리합니다. 그러나 fetch()에는 AbortController()를 사용한 수동 시간 초과 처리가 필요합니다. 이를 통해 요청이 중단되는 방법과 시기를 더 효과적으로 제어할 수 있습니다.

GitHub 참조

자세한 내용은 GitHub 저장소에서 Axios와 Fetch의 전체 예를 참조하세요.

결론

많은 도구와 마찬가지로 Axios와 Fetch API 모두 장점과 단점이 있습니다. 복잡한 프로세스를 간소화하기 위해 JSON의 자동 구문 분석, 통합 오류 처리 및 인터셉터가 필요한 경우 Axios를 선택하세요. 최신 브라우저 환경에 가장 적합하고 외부 라이브러리가 필요하지 않은 순수하고 간단한 인터페이스를 원한다면 fetch()를 선택하세요. 간단히 말해서 둘 다 잘 작동하지만 다양한 수준의 복잡성과 기능 요구 사항에 적합합니다.

관련 블로그

  • JavaScript에서 HTTP 오류 처리에 대한 5가지 모범 사례
  • HTTP 요청 처리를 위한 상위 5개 Chrome 확장 프로그램
  • ASP.NET HTTP 처리기 및 모듈을 ASP.NET Core 미들웨어로 마이그레이션하는 방법
  • 가져오기 요청을 사용하여 Syncfusion ASP.NET MVC DataGrid에서 CRUD 작업을 효율적으로 처리

위 내용은 Axios와 Fetch API? 올바른 HTTP 클라이언트 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
Nordhold : Fusion System, 설명
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Python vs. JavaScript : 학습 곡선 및 사용 편의성 Python vs. JavaScript : 학습 곡선 및 사용 편의성 Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

JavaScript 및 웹 : 핵심 기능 및 사용 사례 JavaScript 및 웹 : 핵심 기능 및 사용 사례 Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트 자바 스크립트 행동 : 실제 예제 및 프로젝트 Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 엔진 이해 : 구현 세부 사항 JavaScript 엔진 이해 : 구현 세부 사항 Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스 Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스 Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

Python vs. JavaScript : 개발 환경 및 도구 Python vs. JavaScript : 개발 환경 및 도구 Apr 26, 2025 am 12:09 AM

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할 JavaScript 통역사 및 컴파일러에서 C/C의 역할 Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교 Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교 Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

See all articles