Axios는 자바스크립트에서 가장 널리 사용되는 HTTP 통신 라이브러리 중 하나입니다. 이 블로그 포스트에서는 Axios를 사용하여 동기 및 비동기 요청을 어떻게 수행할 수 있는지 알아보겠습니다.
동기 요청
동기 요청은 요청이 시작된 후 응답이 도착하기 전까지 코드 실행이 일시 중지되는 방식입니다. Axios를 사용하여 동기 요청을 수행하려면 axios.get 또는 axios.post 메서드를 사용하면 됩니다.
const axios = require('axios');
try {
const response = axios.get('https://api.example.com/posts');
console.log(response.data);
} catch (error) {
console.error(error);
}
위의 예제에서 axios.get 메서드를 사용하여 서버로부터 데이터를 가져옵니다. response 객체를 통해 응답 데이터에 접근할 수 있습니다.
비동기 요청
비동기 요청은 요청이 시작된 후 코드 실행이 멈추지 않고 계속 진행되는 방식입니다. Axios는 Promise 기반으로 작동하기 때문에 then 및 catch 메서드를 사용하여 비동기 요청을 처리할 수 있습니다.
const axios = require('axios');
axios.get('https://api.example.com/posts')
.then(function(response) {
console.log(response.data);
})
.catch(function(error) {
console.error(error);
});
위의 예제에서 axios.get 메서드를 호출하고 then 메서드를 사용하여 응답 데이터에 접근하고 에러가 발생할 경우 catch 메서드로 처리합니다.
요청 설정
Axios를 사용하여 요청을 보낼 때 다양한 설정을 추가할 수 있습니다. 예를 들어, 요청에 헤더를 추가하거나 요청 시간 초과를 설정할 수 있습니다.
const axios = require('axios');
axios.get('https://api.example.com/posts', {
headers: {
'Authorization': 'Bearer token123'
},
timeout: 5000
})
.then(function(response) {
console.log(response.data);
})
.catch(function(error) {
console.error(error);
});
위의 예제에서 헤더와 타임아웃을 설정하였습니다. headers 객체를 사용하여 헤더를 추가하고 timeout 속성을 사용하여 요청 시간 초과를 설정할 수 있습니다.
결론
Axios를 사용하여 동기 및 비동기 요청을 수행하는 방법을 살펴보았습니다. 동기 요청은 코드 실행이 중지되지만 응답을 기다릴 필요가 있을 때 사용하고, 비동기 요청은 코드 실행이 중지되지 않고 응답을 기다리지 않아도 되는 경우에 사용할 수 있습니다. Axios는 간편한 API와 다양한 설정 옵션으로 HTTP 통신을 간편하게 처리할 수 있도록 도와줍니다.