프로미스는 JavaScript에서 비동기 작업을 처리하기 위한 강력한 패턴이다. 이를 통해 비동기 작업을 좀 더 간결하고 읽기 쉽게 작성할 수 있다. 이번 블로그 포스트에서는 프로미스를 사용하여 HTTP 클라이언트를 작성하는 방법에 대해 알아보겠다.

axios 라이브러리

axios는 JavaScript에서 가장 인기 있는 HTTP 클라이언트 라이브러리 중 하나이다. 이 라이브러리는 프로미스 기반으로 작성되어 있어 비동기 작업을 처리하기에 용이하다. axios를 사용하여 HTTP 요청을 보내는 예제를 살펴보자.

const axios = require('axios');

axios.get('https://api.example.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위 코드에서는 axios의 GET 메서드를 사용하여 “https://api.example.com/posts” 주소로 GET 요청을 보내고 그 응답을 받아와서 출력한다. 요청과 응답은 모두 프로미스로 처리되므로 .then과 .catch 메서드를 통해 비동기 작업의 성공과 실패를 처리할 수 있다.

axios는 GET 요청 외에도 POST, PUT, DELETE 등 다양한 HTTP 메서드를 제공하며, 요청에 파라미터나 헤더를 추가할 수도 있다.

async/await와 함께 사용하기

프로미스를 사용할 때 .then과 .catch를 사용해서 비동기 작업의 흐름을 제어하게 된다. 하지만 ES2017부터 추가된 async/await 문법을 사용하면 비동기 작업을 동기적으로 처리할 수 있다. axios와 async/await를 함께 사용하는 예제를 살펴보자.

const axios = require('axios');

const getPosts = async () => {
  try {
    const response = await axios.get('https://api.example.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

getPosts();

async/await를 사용하여 비동기 함수인 getPosts를 정의하고, 함수 내에서 axios의 GET 메서드를 호출하여 데이터를 받아온다. await 키워드를 사용하여 비동기 작업이 완료될 때까지 대기하고, 작업이 완료되면 그 결과를 받아와서 처리한다.

async/await를 사용하면 코드의 가독성이 좋아지고, 에러 처리도 간편해진다. 하지만 async/await는 ES2017 이상의 버전에서만 사용할 수 있으므로, 이를 지원하는 환경에서만 사용할 수 있음에 주의해야 한다.

마무리

프로미스는 비동기 작업을 처리하기 위한 강력한 패턴으로, axios를 비롯한 다양한 라이브러리에서도 많이 사용된다. 이번 포스트에서는 axios와 프로미스를 함께 사용하여 간단한 HTTP 클라이언트를 작성하는 방법에 대해 알아보았다. 프로미스를 사용하면 비동기 작업을 좀 더 효율적으로 처리할 수 있으며, async/await와 함께 사용하면 코드의 가독성을 개선할 수 있다. 자세한 내용은 axios 공식 문서를 참조해보자.

참조: axios 공식 문서