성빈
fetch와 axios 본문
axois와 fetch 모두 HTTP 요청을 보내는 데 사용되는 도구이다. axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공한다.
✅ axios
- Node.js, 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리
- 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.
- HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변환해준다.
[장점]
- response timeout 처리 방법이 존재한다.
- 요청을 중도 취소, 응답시간 초과 설정 등의 기능
- Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리하다.
- 크로스 브라우징 최적화로 브라우저 호환성이 뛰어나다. (구형 브라우저 지원)
- JSON 데이터를 자동 변환해준다.
- Error 발생 시 reject로 response를 전달해 catch로 잡아낼 수 있다.
[단점]
- 사용을 위해 모듈 설치가 필요하다. npm install axios
✅ fetch
- ES6부터 들어온 JavaScript 내장 라이브러리
- Promise 기반으로 만들어졌기 때문에 데이터를 다루기 편하다.
- 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.
[장점]
- 자바스크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없다.
- Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리하다.
- 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.
[단점]
- 지원하지 않는 브라우저가 존재 (IE11..)
- 네트워크 에러 발생 시 response timeout이 없어 기다려야 한다.
- JSON으로 변환해주는 과정 필요하다.
- 상대적으로 axios에 비해 기능이 부족하다
✅ GET 요청
axios
axios.get('/api/users')
.then(response => {
// 응답 데이터 처리
console.log(response.data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
- .get() 메서드를 사용해 간단하게 GET 요청을 보낼 수 있다.
- 응답 데이터는 response.data로 접근할 수 있다.
- 에러 핸들링은 .catch() 메서드를 통해 처리할 수 있다.
fetch
fetch('/api/users')
.then(response => response.json())
.then(data => {
// 응답 데이터 처리
console.log(data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
- .json() 메서드를 사용하여 응답 데이터를 JSON 형식으로 파싱해야한다.
- 응답 데이터는 체이닝된 다음 .then() 블록에서 접근할 수 있다.
- 에러 핸들링은 동일하게 .catch() 메서드를 통해 처리할 수 있다.
✅ POST 요청
axios
axois
axios.post('/api/users', { name: 'John', age: 25 })
.then(response => {
// 응답 데이터 처리
console.log(response.data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
- .post() 메서드를 사용하여 POST 요청을 보낼 수 있으며, 두번째 인자로 데이터가 전달된다.
- 응답 데이터는 response.data로 접근할 수 있다.
fetch
fetch('/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John', age: 25 })
})
.then(response => response.json())
.then(data => {
// 응답 데이터 처리
console.log(data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
- 요청 설정 객체에 method, headers, body 등을 명시하여 POST 요청을 구성해야 한다.
- 응답 데이터는 response.json() 을 사용하여 JSON 형식으로 파싱해야 한다.
결론
fetch를 사용하는 경우에는 요청 설정 객체에 더 많은 구성을 해주어야 하고, 응답 데이터에 접근하기 위해 .json() 메서드를 호출하여 데이터를 파싱해야하지만, axios는 코드를 간결하고 직관적으로 유지하는 데 도움이 된다. 하지만 fetch와 axios 중 어느 것을 선택할 지는 프로젝트의 요구 사항에 맞춰야 할 것 같다. 간단한 요청을 보낼 때는 fetch가 편리하며, 좀 더 복잡한 요청 및 에러 처리가 필요한 경우 axios를 사용할 수 있을 것 같다.
→ 이번 프로젝트에서는 axios를 활용하도록 하겠다.
참고
https://kindjjee.tistory.com/145
fetch 보다 axios를 쓰는 이유
메인 프로젝트에서 템플릿을 사용할때, 왜 사용하는지 정리하는 중에 알게 된 사실이다. 왜 fetch 보다 axios를 쓰는 것이 좋을까? axios와 fetch는 모두 HTTP 요청을 보내는 데 사용되는 도구입니다. 하
kindjjee.tistory.com
https://tlsdnjs12.tistory.com/26
fetch와 axios 차이점과 비교
저번에 API에 대해서 알아봤습니다. 자바스크립트에서 HTTP Requests를 위한 방법이 두가지가 존재하는데 🎁 오늘은 어떤것이 존재하고 어떤 차이점이 존재하는지 알아보겠습니다. 🎁 💖 Fetch ES6
tlsdnjs12.tistory.com
'React' 카테고리의 다른 글
useHistory 그리고 useNavigate (0) | 2024.07.23 |
---|---|
react-router-dom 오류 (2) | 2024.07.23 |
텍스트 편집기 직접 만들기 (0) | 2024.03.21 |
텍스트 입력 시, 한글 마지막 글자가 추가되는 문제 (0) | 2024.03.12 |
axios와 fetch (1) | 2024.02.14 |