Axios는 자바스크립트를 사용하여 HTTP 요청을 보내는데 사용되는 라이브러리입니다. 클라이언트 측에서 데이터를 검색하는 경우에도 Axios를 사용할 수 있습니다. 이 글에서는 Axios를 사용하여 클라이언트 측에서 데이터를 검색하는 방법에 대해 알아보겠습니다.
설치
먼저, Axios를 설치해야 합니다. npm을 사용하는 경우, 다음 명령을 사용하여 Axios를 설치할 수 있습니다.
npm install axios
브라우저에서 직접 사용하는 경우, Axios는 axios
전역 객체로 사용할 수 있습니다. 스크립트 태그를 사용하여 Axios를 가져오세요.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
사용법
Axios를 사용하여 데이터를 검색하기 위해 API 엔드포인트에 요청을 보내야 합니다. 일반적으로 GET 요청을 사용하여 데이터를 검색합니다. 다음은 Axios를 사용하여 GET 요청을 보내는 간단한 예제입니다.
axios.get('/api/data').then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
위의 예제에서는 /api/data
엔드포인트에 GET 요청을 보내고, 데이터를 콘솔에 출력합니다. 요청이 성공하면 response.data
에서 응답 데이터에 접근할 수 있습니다. 요청이 실패하면 error
객체가 catch 블록으로 전달됩니다.
매개변수 전달
GET 요청에서는 매개변수를 엔드포인트 뒤에 추가하여 전달할 수 있습니다. Axios는 params
속성을 사용하여 매개변수를 지정할 수 있습니다. 다음은 매개변수를 포함한 GET 요청의 예제입니다.
axios.get('/api/data', {
params: {
search: 'example',
page: 1
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
위의 예제에서는 /api/data
엔드포인트로 search
와 page
매개변수를 전달하여 데이터를 검색합니다.
요청 헤더 설정
Axios를 사용하여 요청을 보낼 때, 헤더를 설정하여 인증 토큰이나 추가 정보를 전달할 수 있습니다. headers
속성을 사용하여 요청 헤더를 설정할 수 있습니다. 다음은 요청 헤더를 설정하는 예제입니다.
axios.get('/api/data', {
headers: {
Authorization: 'Bearer MY_TOKEN'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
위의 예제에서는 Authorization
헤더에 ‘Bearer MY_TOKEN’ 값을 설정하여 요청을 보냅니다. 필요에 따라 다른 헤더를 설정할 수도 있습니다.
Axios를 사용하여 클라이언트 측에서 데이터를 검색하는 방법에 대해 알아보았습니다. Axios는 간편하고 강력한 HTTP 클라이언트이므로, 데이터 검색이 필요한 경우 사용해 보세요.
#axios #javascript