Ajax, axios, fetch 의 차이점 및 장단점 그리고 사용법

Ajax, axios, fetch

웹 개발을 하면 필수적으로 클라이언트와 서버 간의 데이터를 주고받기 위해 비동기 HTTP 통신을 하게 되는데 Ajax, axios, fetch는 모두 웹 개발에서 네트워크 요청을 처리하는 방법이다. 

---

Ajax (Asynchronous JavaScript and XML)

• Ajax는 웹 페이지에서 비동기적으로 서버와 데이터를 교환하는 기술을 의미합니다.
• XMLHttpRequest 객체를 사용하여 데이터를 요청하고 응답을 처리합니다.
• 비동기적으로 데이터를 받아와서 현재 페이지를 리로드하지 않고도 데이터를 업데이트할 수 있습니다.

 

장점

• 브라우저 내장 기술로 지원되며, 비교적 오래된 브라우저에서도 사용 가능
• Error, Success, Complete의 상태를 통해 실행 흐름 조절 가능

 

단점

• 코드가 복잡하고 가독성이 낮다.
• 에러 처리가 불편하다.
• Promise 기반이 아니다

 

사용법

<!-- HTML 코드 -->
<div id="app">
  <button @click="loadData">데이터 불러오기</button>
  <div>{{ data }}</div>
</div>

<!-- JavaScript 코드 -->
<script>
  const app = new Vue({
    el: "#app",
    data: {
      data: ""
    },
    methods: {
      loadData() {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "https://api.example.com/data");
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4 && xhr.status === 200) {
            this.data = xhr.responseText;
          }
        };
        xhr.send();
      }
    }
  });
</script>

---

Axios 

• Axios는 자바스크립트의 HTTP 클라이언트 라이브러리로, 비동기적으로 HTTP 요청을 처리합니다.
• Promise 기반으로 구현되어 있어 비동기 코드를 보다 간결하게 작성할 수 있습니다.
• Node.js와 브라우저 환경에서 모두 사용할 수 있습니다.

 

장점

• 간결하고 사용하기 쉬운 API를 제공
• 요청과 응답에 대한 인터셉터를 제공하여 요청과 응답을 중간에 수정가능
• 브라우저 호환성이 좋음
• Promise 기반이고, 데이터 관리 편리

 

단점

• 추가적인 라이브러리로 설치 필요
• 모듈 번들러를 통해 사용하거나 <script> 태그로 직접 포함해야함

 

사용법

<!-- HTML 코드 -->
<div id="app">
  <button @click="loadData">데이터 불러오기</button>
  <div>{{ data }}</div>
</div>

<!-- JavaScript 코드 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      data: ""
    },
    methods: {
      loadData() {
        axios.get("https://api.example.com/data")
          .then(response => {
            this.data = response.data;
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
  });
</script>

---

Fetch API

 

• Fetch API는 웹 브라우저 내장 API로, 비동기 네트워크 요청을 위한 인터페이스를 제공합니다.
• Promise 기반으로 동작하여 간결하게 비동기 코드를 작성할 수 있습니다.
• 최신 브라우저에서 지원됩니다.

 

장점

• Axios와 유사하게 Promise 기반이라 간결하게 사용할 수 있다
• 브라우저 내장 기능을 사용하기 때문에 별도의 라이브러리 설치 없이 사용 가능
• 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능

 

단점

• 구형 브라우저에서는 지원되지 않을수도 있다. 
• 요청과 응답에 대한 인터셉터가 없다
• JSON으로 변환해주는 과정 필요하다

 

사용법

<!-- HTML 코드 -->
<div id="app">
  <button @click="loadData">데이터 불러오기</button>
  <div>{{ data }}</div>
</div>

<!-- JavaScript 코드 -->
<script>
  const app = new Vue({
    el: "#app",
    data: {
      data: ""
    },
    methods: {
      loadData() {
        fetch("https://api.example.com/data")
          .then(response => response.json())
          .then(data => {
            this.data = data;
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
  });
</script>