[개발 상식] Ajax, Axios, Fetch API가 무엇일까?

Ajax

Asynchronous JavaScript and XML의 약어로 비동기적으로 서버와 상호작용하여 데이터를 가져오는 기술입니다.

1. XMLHttpRequest를 통한 상호작용.
2. 비동기적으로 작동하므로 요청과 응답이 완료될 때 까지 기다리지 않고 다른 작업을 수행할 수 있습니다.

왜 Ajax를 사용할까요?

HTML Form 요소를 이용하여 원하는 데이터를 가져올 수 있습니다

<form action="원하는 데이터 URL" method="get">
<button type="submit"> 

하지만 위의 방법으로 데이터를 받게되면 자동적으로 브라우저 전체에 새로고침이 일어납니다.

따라서 비동기적으로 데이터를 받아올 수 있는 Ajax를 사용합니다.

Ajax 기본 코드

//jQuery를 이용하여 사용합니다.
$.ajax({
  type: "GET",
  url: "여기에 URL을 입력",
  data: {},
  success: function(response){
    console.log(response)
  },
	error: function(error) {
        console.error(error);
  }
})

---

Axios

Axios는 웹 브라우저와 Node.js환경에서 HTTP 요청을 처리하기 위한 JS 라이브러리 입니다.

1. 간결하고 직관적인 문법
2. Promise 기반의 라이브러리. 이를 통해 비동기적으로 작업을 처리합니다.
3. 응답받은 데이터를 자동으로 JS 객체로 파싱합니다.

왜 Axios를 사용할까요?

1. 위에서 말했듯 간편하고 가독성 좋은 문법으로 구조화 하기 쉽습니다

axios.get('여기에 URL을 입력')
  .then(response => {
    console.log('응답 데이터:', response.data);
  })
  .catch(error => {
    console.error('에러:', error);
  });

1. 인터셉터 기능을 이용하여 요청/응답 이전 헤더를 수정하거나 에러 처리 로직을 추가할 수 있습니다.

---

Fetch API

Fetch API는 ES6에서 추가된 내장 API입니다.

1. 모던 브라우저에 내장되어 있어 추가적인 설치가 필요 없습니다.
2. Axios와 같이 Promise 기반으로 비동기 작업을 처리합니다.

왜 Fetch API를 사용할까요?

1. 브라우저에 내장된 기능으로 라이브러리 설치가 따로 필요없습니다.
2. Promise 기반으로 구조화하기 좋고 가독성이 좋습니다.
3. JSON 데이터로 자동으로 파싱됩니다.

Fetch API 기본 코드

fetch('여기에 URL을 입력', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(postData),
})
  .then(response => response.json())
  .then(data => {
    console.log('응답 데이터:', data);
  })
  .catch(error => {
    console.error('에러:', error);
  });

---

Ajax보다 Fetch API와 Axios가 사용되는 이유?

위 설명에서 봤듯이 Fetch API와 Axios는 Promise 기반으로 작동됩니다.

Promise 기반으로 작동 된다는 것이 어떤 것을 의미할까요?

기존 비동기 처리의 문제점

기존 비동기 처리 즉 Ajax의 비동기 처리는 API서버에서 응답값을 받을 수 있는지 아닌지에 대한 확신이 없습니다. 다음 응답이 아직 오지 않았는데, 이외의 코드, 로직이 실행된다면 문제가 발생할 수 있습니다. 이를 해결하기 위해서는 콜백함수를 사용하여 순서대로 작동시킬 수 있습니다.

콜백 함수를 이용한 코드

//Callback Hell
$.ajax({
  type: "GET",
  url: "여기에 URL을 입력",
  data: {},
  success: function(response){
    if(response.ok){
			$.ajax({
			  type: "GET",
			  url: "여기에 URL을 입력",
			  data: {},
			  success: function(response){
			    if(response.ok){
						$.ajax({
						  type: "GET",
						  url: "여기에 URL을 입력",
						  data: {},
						  success: function(response){
						    console.log(response.data)
						  }
						})
					}
			  }
			})
		}
  }
})

위와 같이 콜백함수를 이용하여 코드를 작성하는 것은 가독성이 매우 좋지 않습니다.

이를 Promise로 해결하였고, 따라서 Promise 기반으로 작성된 Axios라이브러리와 Fetch API를 사용하여 유지보수를 편리하게 사용할 수 있습니다.

Axios와 Fetch API

Axios는 따로 설치를 해주어야 하는 라이브러리이고, Fetch API는 브라우저에 내장된 API입니다. 간단한 Fetching 작업을 해줄 시에는 Fetch API, 더 많은 기능과 확장성을 요구할 시에는 Axios 라이브러리를 사용하면 되겠습니다!