TL;DR: Axios와 Fetch API는 인기 있는 HTTP 클라이언트입니다. Axios는 더 많은 기능과 더 쉬운 오류 처리를 제공하는 반면, Fetch API는 가볍고 브라우저에 기본입니다. 복잡한 프로젝트에는 Axios를 선택하고 간단한 프로젝트에는 Fetch를 선택하세요
비동기 HTTP 요청을 처리하는 가장 일반적인 두 가지 방법은 fetch()와 Axios입니다. 일반적인 작업임에도 불구하고 작업하기로 선택한 요청 유형은 앱의 유용성과 전반적인 효율성에 상당한 영향을 미칠 수 있습니다. 그러니 꼼꼼히 따져보고 장단점을 따져보고 선택하는 것이 현명합니다.
이 기사에서는 널리 사용되는 두 가지 도구를 종합적으로 비교하여 프로젝트에 가장 적합한 선택을 내리는 데 도움을 드립니다.
은 브라우저( 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>
Fetch API도 약속 기반이지만 모든 최신 브라우저에서 사용할 수 있는 기본 JavaScript API입니다. 또한 Node.js 환경과 호환되며 레거시 XMLHttpRequests를 더 간단하고 현대적인 접근 방식으로 대체했습니다. Fetch API는 요청을 보내기 위한 fetch() 메서드를 제공하고 JSON, Blob, FormData와 같은 다양한 요청 및 응답 유형을 지원합니다.
이제 Axios와 fetch()가 무엇인지 이해했으므로 코드 예제를 통해 이 두 가지의 주요 기능을 비교하고 대조해 보겠습니다.
구문에 관한 한 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입니다.
fetch()는 최신 브라우저에 기본으로 제공되며 최신 브라우저와 원활하게 작동합니다. 그러나 일부 이전 브라우저 버전은 지원하지 않습니다. fetch()를 사용하지 않는 브라우저에서 작동하도록 하려면 whatwg-fetch와 같은 폴리필과 함께 사용할 수 있습니다. 그러나 폴리필을 사용하면 번들 크기가 늘어나고 성능에 영향을 미칠 수 있다는 점에 유의하는 것이 중요합니다.
!(https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Fetch-compatibility.png)
HTTP 인터셉터를 사용하면 요청과 응답을 가로챌 수 있으며 다음과 같은 경우에 유용합니다.
이 강력한 기능은 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 저장소에서 Axios와 Fetch의 전체 예를 참조하세요.
많은 도구와 마찬가지로 Axios와 Fetch API 모두 장점과 단점이 있습니다. 복잡한 프로세스를 간소화하기 위해 JSON의 자동 구문 분석, 통합 오류 처리 및 인터셉터가 필요한 경우 Axios를 선택하세요. 최신 브라우저 환경에 가장 적합하고 외부 라이브러리가 필요하지 않은 순수하고 간단한 인터페이스를 원한다면 fetch()를 선택하세요. 간단히 말해서 둘 다 잘 작동하지만 다양한 수준의 복잡성과 기능 요구 사항에 적합합니다.
위 내용은 Axios와 Fetch API? 올바른 HTTP 클라이언트 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
