Axios는 많은 웹 개발자들이 사용하는 자바스크립트 HTTP 클라이언트 라이브러리입니다. 이 라이브러리는 ES6의 Promise를 기반으로 하여 비동기 요청을 처리하며, 간편한 인터페이스를 제공합니다.

이번 포스트에서는 Promise를 기반으로 한 Axios 요청 방법을 알아보겠습니다.

Axios 설치

Axios를 사용하기 위해서는 먼저 Axios를 설치해야 합니다.

$ npm install axios

Promise 기반의 Axios 요청 예제

Axios를 사용하여 HTTP 요청을 보내는 방법은 매우 간단합니다. 아래 예제에서는 GET 메서드를 사용하여 “https://jsonplaceholder.typicode.com/posts” 엔드포인트로 요청을 보내고, 응답을 콘솔에 출력합니다.

const axios = require('axios');

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

위의 예제에서 axios.get() 메서드는 Promise를 반환합니다. 그리고 이 Promise는 요청이 성공적으로 완료되면 then() 메서드로 응답을 처리하고, 요청이 실패하면 catch() 메서드로 에러를 처리합니다.

요청 옵션 설정

Axios를 사용하여 요청을 보낼 때 추가적인 옵션을 설정할 수 있습니다. 아래 예제에서는 POST 메서드를 사용하여 “https://jsonplaceholder.typicode.com/posts” 엔드포인트로 요청을 보내고, 요청 본문에 데이터를 추가하여 보내고 있습니다.

const axios = require('axios');

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

위의 예제에서 axios.post() 메서드의 두 번째 인자로 요청 본문 데이터를 전달하고 있습니다.

결론

이 포스트에서는 Axios를 사용하여 Promise 기반의 HTTP 요청을 보내는 방법에 대해 알아보았습니다. Axios는 간단하고 강력한 인터페이스를 제공하여 개발자들이 비동기 요청을 손쉽게 처리할 수 있도록 도와줍니다.

더 자세한 사용법은 Axios 공식 문서를 참고하십시오.