[비동기 작업 도구] - Promise, fetch, async/await, axios에 대해서 알아보자

1. Promise

Promise는 비동기 작업의 결과를 나타내는 객체입니다. 비동기 작업이 성공적으로 완료되면 결과값을 제공하거나, 실패하면 에러를 반환합니다.

주요 특징

• 상태: Pending (대기), Fulfilled (이행), Rejected (거부) 세 가지 상태를 가집니다.
• 메소드: then, catch, finally 메소드를 사용하여 결과를 처리합니다.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터 수신 완료");
    }, 1000);
  });
};

fetchData().then(result => {
  console.log(result); // "데이터 수신 완료"
}).catch(error => {
  console.error(error);
});

 

---

2. fetch

fetch는 최신 웹 API로, HTTP 요청을 보내고 응답을 처리하기 위한 메소드를 제공합니다. Promise 기반으로 동작하여 비동기적으로 데이터를 가져오는 함수입니다.
브라우저에서 제공하는 내장 함수로, XMLHttpRequest를 대체하며, 간단한 네트워크 요청을 처리할 때 유용합니다.

주요 특징

• Promise 기반: fetch는 Promise를 반환하므로 then과 catch를 사용하여 응답을 처리합니다.
• 응답 처리
  • HTTP 응답은 Response 객체로 반환되며, 이 객체의 json(), text() 등의 메소드를 사용하여 응답 본문을 파싱할 수 있습니다.
  • JSON 데이터를 처리하려면 response.json()과 같이 추가적인 처리가 필요합니다.
  • fetch는 네트워크 오류와 같은 근본적인 오류에서만 Promise를 reject합니다. HTTP 상태 코드가 404 또는 500과 같은 경우에도 Promise는 resolve되므로 추가적인 에러 처리가 필요합니다.

fetch('https://api.example.com/data')
  .then(response => response.json()) // JSON 응답을 파싱
  .then(data => console.log(data))   // 데이터 처리
  .catch(error => console.error(error));

 

---

3. async/await

async/await는 비동기 작업을 동기 코드처럼 작성할 수 있게 해주는 문법입니다. 이는 Promise 기반의 코드 작성 방식을 보다 직관적으로 만들어줍니다.

주요 특징

• 비동기 함수: async로 선언된 함수는 항상 Promise를 반환합니다.
• 대기: await 키워드를 사용하여 Promise가 처리될 때까지 기다릴 수 있습니다.
• 에러 처리: try/catch 블록을 사용하여 에러를 처리합니다.

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchData();

 

---

4. axios

axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, HTTP 요청을 간편하게 보내고 응답을 처리할 수 있게 해줍니다. fetch보다 사용이 편리하고 다양한 기능을 제공합니다.

주요 특징

• Promise 기반: axios는 Promise를 반환하므로 then과 catch를 사용하여 응답을 처리합니다.
• 자동 JSON 변환: axios는 응답 본문을 자동으로 JSON으로 변환합니다.
• 요청 및 응답 인터셉터: 요청과 응답을 가로채서 처리할 수 있는 기능을 제공합니다.
• 브라우저와 Node.js 지원: 브라우저와 Node.js 환경 모두에서 사용할 수 있습니다.

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 자동으로 JSON으로 변환된 데이터
  })
  .catch(error => {
    console.error(error);
  });

 

---

비교 요약

기본 사용법	비동기 작업의 결과를처리하기 위한 객체	HTTP 요청을 보내고 응답을 처리하는 함수	비동기 코드를 동기처럼 작성할 수 있는 문법	HTTP 요청을 보내고 응답을 처리하는 라이브러리
응답처리	then과 catch 사용	then과 catch 사용, 응답 객체의 메소드로 처리	await 사용, 동기 코드처럼 처리	자동 JSON 변환, then과 catch 사용
에러처리	catch 블록 사용	catch 블록 사용	try/catch 블록 사용	catch 블록 사용
브라우저 호환성	모든 브라우저와 호환	모든 브라우저와 호환	모든 브라우저와 호환	모든 브라우저와 호환, Node.js도 지원
기타기능	기본적인 비동기 처리	기본적인 HTTP 요청 처리	비동기 작업의 동기적 표현	요청 및 응답 인터셉터, 자동 JSON 변환 등