- Published on
fetch, axios 란? (with Fetch)
- Authors
- Name
- Deokgoo Kim
들어가기전
라이브러리를 사용할 수 없는 환경에서 js를 작성한적이 있었는데 XMLHttpRequest
을 사용하여 낡은 코드를 작성한다고(2019년에) 코칭을 받고 충격받은 적이 있어 Axios, Fetch
에 대해서 정리 하였습니다.
본론
1. Fetch
XMLHttpRequest API의 대체제로 간단하게 사용하는 것이 가능합니다.
특징
- Promise패턴을 사용하고 있습니다.
- Promise 객체는 HTTP error 상태를 reject하지 않습니다. 대신 ok 상태가 false인 resolve가 반환되고 네트워크 에러 상태에는 reject가 반환됩니다.
- 기본적으로 fetch는 쿠키를 보내거나 받지 않습니다. (필요하면 credentials설정을 통하여 쿠키 전송)
- 간단하게 사용할 수 있으며 module import가 필요없다.
👇 MDN에 정리가 잘되어있어서 가져왔습니다. MDN 참고
postData('http://example.com/answer', {answer: 42})
.then(data => console.log(JSON.stringify(data)))
.catch(error => console.error(error));
function postData(url = '', data = {}) {
return fetch(url, {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
},
redirect: 'follow',
referrer: 'no-referrer',
body: JSON.stringify(data),
})
.then(response => response.json());
}
2. Axios
Axios는 브라우저를 위한 Promise패턴 기반으로 브라우저와 node에서 동작한다고 한다. nodejs에서는 http모듈을 사용하고 브라우저에서는 XMLHttpRequests를 사용한다고 합니다.
특징
- 브라우저에서 XMLHttpRequests, node.js에서 http
- Promise패턴 사용
- 요청 및 응답 가로채기
- 요청 및 응답 데이터 변환
- 취소요청
- JSON 데이터에 대한 자동 변환 (너무 편합니다❤️)
- XSRF 로부터 보호하기 위한 클라이언트 측 지원
👇 Document내용을 가져왔습니다. axios document 참고
// GET request for remote image in node.js
axios({
method: 'get',
url: 'http://bit.ly/2mTM3nY',
responseType: 'stream'
})
.then(function (response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
결론
- 결론은 둘다 XMLHttpRequest의 대체제로 나왔고 Promise패턴을 사용할 수 있는것이 너무 좋습니다.
- Fetch에 비해 Axios가 좀 더 많은 기능들이 있습니다.
- 허나 axios는 모듈 설치가 필요하기 떄문에 안정적이지 못한 프레임워크를 사용할떄는 불안합니다.
- 모듈 설치 환경이 안되거나 프레임워크가 불안정하다
Fetch
- 안정적이고 모듈 설치가 가능하다
Axios