최근에 자바스크립트에서 비동기 데이터를 손쉽게 로딩하기 위해 Axios라는 라이브러리가 많이 사용되고 있습니다. Axios는 간편한 API를 제공하여 서버로부터 데이터를 요청하고 응답을 받을 수 있습니다. 이번 포스트에서는 Axios를 사용하여 클라이언트 측에서 비동기 데이터를 로딩하는 방법에 대해 알아보겠습니다.
Axios 설치하기
Axios를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용한다면 다음 명령어를 사용하여 설치할 수 있습니다.
npm install axios
yarn을 사용한다면 다음 명령어를 사용하여 설치할 수 있습니다.
yarn add axios
비동기 데이터 로딩하기 예제
다음은 간단한 예제 코드입니다. 이 예제에서는 Axios를 사용하여 “https://api.example.com/data”와 같은 URL에서 데이터를 요청하고, 응답을 받은 후 처리하는 방법을 보여줍니다.
import axios from 'axios';
axios.get('https://api.example.com/data')
.then((response) => {
// 응답 받은 데이터 처리
console.log(response.data);
})
.catch((error) => {
// 에러 처리
console.error(error);
});
위 코드에서는 get() 메소드를 사용하여 데이터를 요청하고, 요청이 성공하면 then() 메소드를 통해 응답 데이터를 처리합니다. 요청이 실패한 경우 catch() 메소드를 통해 에러를 처리할 수 있습니다.
Axios 옵션 설정하기
Axios는 다양한 옵션을 설정하여 요청을 커스터마이징할 수 있습니다. 예를 들어, 헤더에 인증 토큰을 포함하고 싶다면 다음과 같이 설정할 수 있습니다.
axios.get('https://api.example.com/data', {
headers: {
Authorization: 'Bearer {token}'
}
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
});
위 코드에서는 headers 옵션을 사용하여 헤더에 Authorization 필드를 추가하고 있다는 것을 보여줍니다.
마무리
이번 포스트에서는 Axios를 사용하여 클라이언트 측에서 비동기 데이터를 로딩하는 방법에 대해 알아보았습니다. Axios는 간단하고 편리한 API를 제공하므로 비동기 데이터 가져오기에 유용한 도구입니다. 추가적으로 Axios의 다양한 옵션 설정을 통해 요청을 커스터마이징할 수 있습니다.
참고 자료:
#axios #비동기데이터 #클라이언트 #로딩