Axios와 Promise의 사용

2_현주·2024년 6월 21일
async/awaitaxiospromisethen&catch
0

스터디

목록 보기
7/7

2024.06.21 8차 스터디

오늘의 스터디 주제는? Axios와 Promise의 사용!

프로젝트를 할 때는 axios를 사용할 때 async/await을 사용하여 비동기 처리를 하였는데 이번 도커를 배우는 과정에서는 then/catch를 사용하여서 무엇이 다른건지 알아보고자 한다!




1. Axios란?

1-1. Axios의 의미

Axios는 웹 페이지나 서버에서 HTTP 요청을 쉽게 처리할 수 있는 JavaScript 라이브러리입니다. Promise 기반으로 설계되어 비동기 작업을 간편하게 처리할 수 있으며, 다양한 HTTP 요청 메서드(GET, POST, PUT, DELETE 등)를 지원합니다.

1-2. Axios의 주요 기능

Axios의 주요 기능이 많지만 그 중에서 자주 사용해본 기능 세가지만 알아봅시다.

  1. 다양한 HTTP 메서드
    Axios는 GET, POST, PUT, DELETE 등 다양한 HTTP 요청 메서드를 지원합니다. 각 메서드는 해당 요청의 특성에 맞게 사용할 수 있습니다.
	axios.get('/data');     // 데이터 가져오기
	axios.post('/data', {   // 데이터 보내기
  	key: 'value'
	});
	axios.put('/data/1', {  // 데이터 업데이트
  	key: 'newValue'
	});
	axios.delete('/data/1'); // 데이터 삭제
  1. 자동 JSON 변환
    Axios는 서버에서 받거나 서버로 보내는 JSON 데이터를 자동으로 JavaScript 객체로 변환합니다. 또한, JavaScript 객체를 서버로 보낼 때 자동으로 JSON 문자열로 변환해줍니다.
	axios.get('https://api.example.com/data')
  	 .then(response => {
    	console.log(response.data);  // 자동으로 변환된 JavaScript 객체
  	 });
	
	axios.post('https://api.example.com/data', {
  		key: 'value'
	});
  1. 응답 데이터 변환
    응답 데이터를 자동으로 변환하여 사용자가 쉽게 처리할 수 있도록 도와줍니다.
	axios.get('/data')
  	.then(response => {
    	console.log(response.data);  // 자동으로 변환된 응답 데이터
  	});




2. Promise란?

위의 설명에서 Axios가 Promise 기반으로 설계되어있다고 하는데 그럼 Promise는 무엇일까요?

2-1. Promise의 세가지 상태

Promise는 JavaScript에서 비동기 작업을 처리하는 객체입니다. 비동기 작업의 완료 또는 실패를 나타내며, 세 가지 상태를 가질 수 있습니다:

  • Pending(대기): 작업이 아직 완료되지 않은 상태
  • Fulfilled(이행): 작업이 성공적으로 완료된 상태
  • Rejected(거부): 작업이 실패한 상태

Promise는 비동기 작업의 결과를 처리하기 위해 then, catch, finally 메서드를 제공합니다.



3. Axios 사용 방법

3-1. then/catch

then과 catch는 Promise 객체의 메서드로, 비동기 작업이 완료되거나 실패했을 때 실행할 코드를 지정합니다.

  • then은 작업이 성공적으로 완료될 때 실행
  • catch는 작업이 실패했을 때 실행

GET 요청의 예시를 함께 볼까요?

const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);  // 성공적으로 데이터를 받아온 경우
  })
  .catch(error => {
    console.error('Error fetching data:', error);  // 요청이 실패한 경우
  });

3-2. async/await + try/catch

async와 await 키워드를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있습니다. await는 Promise가 해결될 때까지 기다리며, async 함수 내에서만 사용할 수 있습니다. 오류 처리는 try/catch 블록을 사용하여 처리합니다.
GET 요청의 예시를 함께 볼까요?

const axios = require('axios');

async function fetchData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
    console.log(response.data);  // 성공적으로 데이터를 받아온 경우
  } catch (error) {
    console.error('Error fetching data:', error);  // 요청이 실패한 경우
  }
}

fetchData();

3-3. async/await + then/catch

async/await와 then/catch를 혼용할 수도 있습니다. 그러나 3-2번 방식으로 코드를 작성하는 것이 더 가독성이 좋습니다.

const axios = require('axios');

async function fetchData() {
  await axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
      console.log(response.data);  // 성공적으로 데이터를 받아온 경우
    })
    .catch(error => {
      console.error('Error fetching data:', error);  // 요청이 실패한 경우
    });
}

fetchData();




4. Axios 사용 방법 차이

then/catch 메서드를 사용하여 비동기 작업을 처리하는 경우와 async/await 키워드와 try/catch 블록을 사용하여 비동기 코드를 동기 코드처럼 작성하는 경우에는 몇 가지 차이점이 있습니다. 주로 코드의 가독성과 작성 방식에서 차이가 나타납니다.

4-1. then/catch

then과 catch 메서드는 Promise 객체의 메서드로, 비동기 작업이 완료되거나 실패했을 때 실행할 코드를 지정합니다. 이 방식은 전통적인 Promise 사용 방식입니다.

const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);  // 성공적으로 데이터를 받아온 경우
    return axios.get('https://jsonplaceholder.typicode.com/posts/2');
  })
  .then(response => {
    console.log(response.data);  // 두 번째 데이터를 받아온 경우
  })
  .catch(error => {
    console.error('Error fetching data:', error);  // 요청이 실패한 경우
  });

장점

  • 명시적 체이닝
    여러 비동기 작업을 순차적으로 수행할 때 체이닝을 통해 명시적으로 연결할 수 있습니다.

  • 직관적인 에러 핸들링
    각 단계별로 에러를 개별적으로 처리할 수 있습니다.

단점

  • 콜백 지옥
    여러 비동기 작업을 중첩하여 처리할 경우 코드가 복잡해지고 가독성이 떨어질 수 있습니다.

  • 가독성 저하
    코드의 흐름이 함수 체이닝으로 인해 분리되어 가독성이 떨어질 수 있습니다.

4-2. async/await + try/catch

async/await는 비동기 작업을 처리하는 새로운 방식으로, 비동기 코드를 동기 코드처럼 작성할 수 있게 합니다. await는 Promise가 해결될 때까지 기다리며, async 함수 내에서만 사용할 수 있습니다.

const axios = require('axios');

async function fetchData() {
  try {
    const response1 = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
    console.log(response1.data);  // 첫 번째 데이터를 받아온 경우

    const response2 = await axios.get('https://jsonplaceholder.typicode.com/posts/2');
    console.log(response2.data);  // 두 번째 데이터를 받아온 경우
  } catch (error) {
    console.error('Error fetching data:', error);  // 요청이 실패한 경우
  }
}

fetchData();

장점

  • 가독성 향상
    동기 코드처럼 작성할 수 있어 코드의 가독성과 유지보수성이 높아집니다.

  • 간편한 에러 핸들링
    try/catch 블록을 사용하여 한 곳에서 에러를 처리할 수 있습니다.

  • 구조적 작성
    비동기 작업을 순차적으로 작성할 때 코드 구조가 명확해집니다.

단점

  • 구형 브라우저 호환성 문제
    오래된 브라우저에서는 async/await를 지원하지 않을 수 있습니다. 이 경우 Babel 같은 트랜스파일러가 필요합니다.

  • 에러 전파가 복잡할 수 있음
    여러 단계의 비동기 작업에서 에러를 체이닝할 경우 복잡해질 수 있습니다.



5. Axios 사용 방법 요약

5-1. then/catch

  • 여러 비동기 작업을 체인으로 연결할 수 있다.
  • 코드의 흐름이 분리되어 가독성이 떨어질 수 있다.
  • 각 단계별로 에러를 개별적으로 처리할 수 있다.

5-2. async/await + try/catch

  • 동기 코드처럼 작성할 수 있어 가독성이 높다.
  • try/catch 블록을 사용하여 간편하게 에러를 처리할 수 있다.
  • 코드 구조가 명확하여 유지보수성이 높다.

결론적으로, 간단한 비동기 작업에는 then/catch를 사용할 수 있지만, 복잡한 비동기 작업이나 여러 단계의 비동기 작업을 처리할 때는 async/await와 try/catch를 사용하는 것이 더 가독성이 좋고 유지보수가 쉽습니다.

profile
2_현주
프론드엔드 개발자 입니다!
이전 포스트

Prettier 설정하기

0개의 댓글