[JavaScript] AJAX, Fetch API, Promise, Axios

웹 페이지에서 서버와 통신하는 함수는 모두 비동기로 처리되어 있다.

동기, 비동기 관련한 정보는 다음 글을 참고하자.
동기, 비동기

이유는 웹 페이지가 서버와 통신하여 데이터를 얻어오는 과정은 시간이 오래 걸리기 때문이다.

또한, 동기로 서버와 통신하는 함수를 제작했다면, 사용자에게 불편함을 초래할 수 있다.

1. 사용자가 검색창에 검색을 하고 있다.
2. 그 와중, 서버한테 데이터가 도착해서 웹 페이지 중 일부가 변경되는 이벤트가 발생했다.
3. 사용자는 자신이 입력한 데이터 중 일부가 사라진다.

따라서 서버와 통신하는 함수는 비동기로 구현해야 한다.

서버와 통신하는 함수를 구현하는건 크게 4가지 AJAX, Fetch API, Promise, Axios로 구분되어 있다.

AJAX (Asyynchronous JavaScript and XML)

AJAX는 JavaScript를 사용하여 서버로부터 비동기적으로 데이터를 가져오는 라이브러리이다.

(AJAX는 JavaScript에서 내장되어있는 라이브러리이다.)

XML뿐만 아니라 JSON, Text 등 다양한 데이터를 가져올 수 있다.

AJAX 장점

• 오래된 브라우저에서도 동작한다. (즉, 호환성이 높다.)

AJAX 단점

• 코드가 꽤 길고 코드 가독성이 떨어진다.
• 비동기 처리 코드가 복잡하다.

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open('[HTTP Method 설정]', '[URL 작성]', [동기, 비동기 설정(true : 비동기, false : 동기)];
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) { // 요청이 완료되었을 때
    if (xhr.status === 200) { // 응답이 성공적일 때
      console.log(JSON.parse(xhr.responseText)); // JSON 데이터를 파싱해서 출력
    } else {
      console.error('Request failed');
    }
  }
};
xhr.send(); // 요청 전송

Fetch API

Fetch는 현대적인 JavaScript에서 사용되는 API로, Promise 기반으로 데이터를 가져온다.

장점

• Promise 객체를 사용하고 있어 비동기 요청을 더 간결하게 작성할 수 있다.

단점

• 오래된 브라우저에서는 지원이 안될 수 있다.
• 자격 증명이 필요한 요청에 대해서 별도의 설정이 필요하다. (Ex, Cookie)

Fetch를 통해서 HTTP Method 요청

fetch(['URL 통신'], {
	method: ["HTTP Method"],
    header: {
    	["Header Key"]: ["Header Value"],
    },
    body: JSON.stringify({
    	[Body Key]: ["Body Value"],
    }),
}) // Default 값은 Get이다.
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok'); // 오류 처리
    }
    return response.json(); // JSON 형식으로 변환
  })
  .then((data) => console.log(data)) // 성공적으로 데이터를 가져왔을 때
  .catch((error) => console.error('Fetch error:', error)); // 오류가 발생했을 때

Promise와 Fetch API를 활용한 비동기 병렬 처리

// 병렬로 API 요청하기
const fetchUser = fetch(['URL']);
const fetchPosts = fetch(['URL']);

Promise.all([fetchUser, fetchPosts])
  .then((responses) => Promise.all(responses.map((res) => res.json()))) // 응답 JSON 변환
  .then(([user, posts]) => {
    console.log('User:', user);
    console.log('Posts:', posts);
  })
  .catch((error) => console.error('Error:', error));

Promise 이란??

Promise는 JavaScript에서 비동기 작업을 처리하기 위한 객체를 말한다.

Promise 사용 방법

const getData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true; // 성공 여부를 가정
    if (success) {
      resolve('Data loaded successfully');
    } else {
      reject('Error loading data');
    }
  }, 2000);
});

getData
  .then((message) => console.log(message)) // 성공 시 실행
  .catch((error) => console.error(error)); // 실패 시 실행

Axios

Axios는 Promise 기반의 HTTP 클라이언트로, Fetch보다 더 편리한 기능을 제공한다.

그러나 JavaScript 내부에서 설치되지 않은 라이브러리이므로, 따로 설치를 하거나 CDN 링크를 달아줘야 한다.

Node.js 환경에서 Axios 설치

npm install axios

브라우저에서 사용하는 경우

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

장점

• 응답 데이터를 자동으로 JSON으로 변환한다.
• 요청과 응답을 가로채서 개발자가 추가적으로 기능을 추가할 수 있다.

단점

• JS에서 제공하는 라이브러리가 아니라서 별도로 라이브러리를 추가해줘야 한다.

Axios Get 요청

axios
  .get(['URL'])
  .then((response) => {
    console.log(response.data); // 응답 데이터
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

Axios Post 요청

axios
  .post(['URL'], {
    [Body Key]: ["Body Value"],
  })
  .then((response) => {
    console.log('POST Response:', response.data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

참고 자료

https://velog.io/@pabang0620/Ajax-Fetch-Axios-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%B9%84%EA%B5%90

Ajax, Fetch, Axios 장단점 비교

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-AJAX-%EC%84%9C%EB%B2%84-%EC%9A%94%EC%B2%AD-%EB%B0%8F-%EC%9D%91%EB%8B%B5-fetch-api-%EB%B0%A9%EC%8B%9D

🌐 Fetch API 으로 AJAX 요청하기

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!