Ajax, axios, fetch 특징

비통기 통신을 위한 API로 Ajax, axios, fetch를 제일 많이 사용한다.

 

이 세 가지 방법의 특징을 알아보자.

 

🥉Ajax

Asynchronous JavaScript And XML의 약자이며, 자바스크립트를 이용해서 클라이언트와 서버끼리 데이터를 비동기적으로 주고 받는 기술이다. XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있다.

 

요즘은 XML을 사용하지 않고 JSON.parse(), JSON.stringify()를 사용한다.

예전에는 제이쿼리를 사용해서 비동기 통신과 JSON 데이터 처리를 했지만, 요즘은 내장 API로 JSON을 다루는 것이 일반적이다.

 

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data");
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    // 데이터 처리 코드
  }
};
xhr.send();

 

🥈fetch

ES6부터 들어온 자바스크립트 내장 라이브러리다.

Promise 기반으로 만들어졌기 때문에 데이터 다루기가 쉽고, JSON이 아닌 일반적인 텍스트 형태의 데이터도 처리가 가능하다.

그러나 IE를 비롯한 일부 브라우저에서 지원되지 않는다.

 

상대적으로 axios에 비해 기능이 부족하다.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

주소로 겟요청을 보내고, 응답을 JSON형태로 파싱하여 콘솔에 출력하는 예시다.

 

🏅axios

Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리다.

fetch는 response 객체를 return 했지만axios는 Promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.브라우저 호환성도 뛰어나다.

 

import axios from 'axios';

axios.get('/user?id=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

해당 경로로 겟요청을 보내서 성공하면 then을 실행하고, 실패하면 catch를 실행한다.