비동기 처리 - Ajax, Fetch 그리고 Axios

WEB

Ajax

Ajax는 웹 브라우저에서 비동기 HTTP 요청을 보내기 위한 기술임

XMLHttpRequest 객체를 사용해 요청을 보내고 그 응답을 받아 처리함

하지만 코드가 복잡하고 콜백 함수로 인해 가독성이 떨어짐

 

Fetch

Fetch는 더 간결하고 직관적인 문법을 제공하며

Promise 기반으로 동작함

.then(), .catch(), async/await 같은 문법을 통해 비동기 처리를 더 쉽게 할 수 있음

fetch('요청url')
  .then(response => response.json())  // 응답을 JSON 형식으로 변환
  .then(data => console.log(data))    // 데이터 처리
  .catch(error => console.error('Error:', error));  // 오류 처리

Fetch의 장점

• 간결하고 직관적인 문법으로 코드 작성이 쉬움
• Promise 기반이기 때문에 비동기 작업을 쉽게 처리할 수 있음

Fetch의 단점

• 에러 처리가 다소 불편함
  예를 들어 fetch는 네트워크 에러가 발생한 경우에만 catch로 처리하지만
  HTTP 상태 코드가 4xx, 5xx인 경우는 then()에서만 처리할 수 있다.
• fetch는 구형 브라우저에서 지원하지 않을 수 있음

Axios

Axios는 fetch와 비슷하게 HTTP 요청을 처리하는 라이브러리임

fetch는 기본적으로 Promise를 사용하지만 Axios는 좀 더 다양한 기능을 제공

예를 들어 요청 취소, 타임아웃 설정, 인터셉터 등 고급 기능을 제공

코드 작성도 간결하며 JSON 파싱을 자동으로 해주기 때문에 편리

axios.get('요청url')
  .then(response => {
    console.log(response.data);  // 응답 데이터 처리
  })
  .catch(error => {
    console.error('Error:', error);  // 오류 처리
  });

 

Axios의 장점

• JSON 자동 파싱
  Axios는 응답을 자동으로 JSON으로 변환해주므로 따로 .json()을 호출할 필요가 없음
• 더 많은 기능
   요청 취소, 타임아웃 설정, 응답 인터셉터 등 다양한 기능을 제공
• 서버 사이드에서 사용 가능
   Axios는 Node.js 환경에서도 사용할 수 있기 때문에
  서버와 클라이언트에서 동일한 라이브러리를 사용할 수 있음
• HTTP 상태 코드 처리가 더 직관적
  Axios는 HTTP 오류 코드가 있을 경우 자동으로 오류를 발생시켜 catch()로 처리할 수 있음

Axios의 단점

• fetch에 비해 용량이 큼
   별도로 라이브러리를 설치해야 하므로 페이지 로드 시간에 영향을 줄 수 있음
• 추가적인 설정이 필요할 수 있음
  예를 들어 인터셉터 설정이나 기본 URL 설정을 별도로 해야 할 수 있음

단순한 HTTP 요청 처리 - Fetch

고급 기능이 필요한 경우 - Axios

구형 브라우저에서

서버와 클라이언트에서 동일한 코드를 사용하고 싶은 경우

Promise

Promise는 비동기 작업의 결과값을 나중에 받을 수 있게 해주는 객체임

.then()과 catch()를 사용해 결과값을 처리할 수 있음

Promise를 사용하면 비동기 코드를 작성할 때 더 가독성이 높아짐

 

Promise 기반이란 비동기 작업을 처리하는 방식 중 하나로

Promise 객체를 사용해 비동기 작업의 성공 또는 실패를 처리하는 방법임

Pending(대기)

Resolved(성공)

Rejected(실패)

let promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("작업 성공!");
  } else {
    reject("작업 실패!");
  }
});

// 성공적인 결과
promise.then(result => {
  console.log(result);  // "작업 성공!"
}).catch(error => {
  console.log(error);  // 오류 처리
});