fetch, axios 란? (with Fetch)

들어가기전

라이브러리를 사용할 수 없는 환경에서 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