fetch? axios
fetch와 axios 모두 promise를 기반으로 한 HTTP 통신 또는 인터페이스를 지원 합니다.
fetch
Fetch API는 ES6에 들어선 JS 내장 라이브러리입니다.
내장 라이브러리로, install 없이 사용이 가능하며
응답 결과를 json형태로 변환 시켜 사용합니다.
fetch 사용 예시
//옵션
const Options: RequestInit = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(userPuu),
};
//요청
const response = fetch("경로명", 옵션명);
//결과
const result = response.json().then((data)=>data)fetch 함수는 두가지를 인자로 받습니다.
첫번째는 요청 경로명, 두번째로는 옵션을 받습니다.
위와 마찬가지로 response를 통해 요청하고 result의 반환값을 json형태로 반환 해주어야 합니다.
옵션에는 다양한 옵션들을 요청할 수 있습니다.
요청 옵션 제공은 다양하므로 MDN 공식 문서에서 확인할 수 있습니다.
fetch 장단점
장점
- 별도의 설치없이 사용 가능
- 업데이트에 따른 에러 방지
단점
- reponse timeout 기능 미지원
- 반환값을 json 형태로 가공해주어야함.
- 일부 브라우저 미지원(IE11)
Axios
Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트입니다.
별도의 설치 후 사용이 가능하고, 반환값을 json 형태로 변환 시키지 않아도 됩니다.
Axios 사용 예시
axios.get('경로명', {
옵션: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// 항상 실행되는 영역
});
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});Axios도 마찬가지로 두가지 인수를 받으며,
첫번째로는 요청 경로명, 두번째는 옵션이다.
fetch와 비슷하게 사용하지만 Axios는 인스턴스를 활용한 timeout 기능을 제공합니다.
Axios 장단점
장점
- 결과값을 json 형태로 변환하지 않아도 됨.
- 인스턴스를 활용한 timeout 기능 지원
단점
- 별도의 설치 필요 (npm install axios, yarr add axios 등)
마치며
그래서 뭐가 좋은걸까?
사실 얼핏 보면 fetch, axios 둘 다 promise 기반의 형태다 보니 비슷해보이지만 가장 큰 차이는 timeout 기능 같습니다.
좋고 안 좋고의 정답은 없는 것 같습니다.
많은 언어와 프레임워크, 라이브러리등 적재적소에 잘 선택하여 사용하는 능력을 길러야겠습니다.
*참고 문서
https://axios-http.com/kr/docs/intro
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
