axios의 정의와 사용법

axios의 정의와 기능

 

axios는 현재 가장 인기 있는 자바스크립트 HTTP 클라이언트 중 하나로, 브라우저와 Node.js에서 모두 사용할 수 있습니다. axios는 다음과 같은 기능을 제공합니다.

 

HTTP 요청과 응답 처리 - GET, POST, PUT, DELETE 등의 HTTP 요청을 보내고, 응답을 받아 처리합니다.

 자동 변환 - axios는 자동으로 요청과 응답 데이터를 JSON, XML, FormData 등으로 변환할 수 있습니다.

인터셉터 - axios는 요청과 응답을 인터셉트하는 기능을 제공하여, 요청과 응답에 대한 중간 처리를 할 수 있습니다.

취소와 타임아웃 - 요청을 취소하거나 타임아웃을 설정할 수 있습니다.

인증과 보안 - HTTP 요청에 대한 인증 정보를 설정할 수 있으며, HTTPS를 지원합니다.

직관적인 사용법 - axios는 다른 HTTP 클라이언트 라이브러리에 비해 매우 간단하고 직관적인 사용법을 제공합니다.

브라우저와 Node.js 환경에서 모두 사용 가능 - axios는 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다.

 

 

이러한 기능들은 개발자들이 RESTful API를 작성할 때 필요한 요소들이며, axios는 이러한 요구사항들을 손쉽게 해결해줍니다.

---

 

axios 설치법

 

axios의 사용 방법은 매우 간단합니다. 먼저 axios를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install axios

이제 axios를 사용하여 HTTP 요청을 보낼 수 있습니다.

 

 

axios 사용방법

 

기본적인 GET, POST 메서드를 사용하여 실제 코드에서 어떻게 사용되는지 알아보겠습니다.

이후 추가적인 기능으로, 인터셉터와 타임아웃을 작성해보겠습니다.

 

엑시오스의 작성문법은 다양합니다. 

 

axios.메서드(`url`, {

`보낼 값`

}).then(`통신 성공!`).catch(`통신실패`)

 

이 포스팅에서는 위 통신양식으로 알아보겠습니다.

 

GET

다음은 GET 요청을 보내는 예제 코드입니다.

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

 

위 코드에서 axios.get 메서드는 /api/users 경로에 GET 요청을 보내고, 요청이 성공하면 then 블록이 실행되어 서버로부터 받은 데이터를 출력합니다. 만약 요청이 실패하면 catch 블록이 실행되어 에러를 출력합니다.

 

POST

POST 요청을 보내는 경우에는 다음과 같이 작성할 수 있습니다.

axios.post('/api/users', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

 

위 코드에서 axios.post 메서드는 /api/users 경로에 POST 요청을 보내고, 요청 바디로 firstName과 lastName 값을 전달합니다. 요청 바디에 담긴 값이 서버에 전송해야하는 데이터를 담는 곳이라고 생각하시면 됩니다.

 

인터셉터 (Interceptors)

axios를 사용하는 방법은 매우 간단하지만, 좀 더 복잡한 상황에서는 인터셉터를 사용하여 요청과 응답을 미리 처리해야 할 때가 있습니다. 인터셉터는 다음과 같이 작성할 수 있습니다.

axios.interceptors.request.use(config => {
  console.log('request is sending...');
  return config;
}, error => {
  console.error(error);
});

axios.interceptors.response.use(response => {
  console.log('response is received...');
  return response;
}, error => {
  console.error(error);
});

 

위 코드에서는 요청 전에 request 인터셉터를 사용하여 요청이 보내지기 전에 메시지를 출력하고, 응답을 받은 후에 response 인터셉터를 사용하여 응답을 받은 후에 메시지를 출력합니다.

 

요청 취소 (CancelToken)

다음은 요청을 취소하는 예제 코드입니다.

const source = axios.CancelToken.source();

axios.get('/api/users', {
  cancelToken: source.token
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request is cancelled');
  } else {
    console.error(error);
  }
});

// 요청을 취소합니다.
source.cancel('Request is cancelled');

위 코드에서는 axios.CancelToken.source 메서드를 사용하여 취소 토큰을 생성하고, 이 토큰을 cancelToken 옵션에 전달하여 요청을 보냅니다. 만약 요청을 취소해야 할 경우, 생성된 취소 토큰을 사용하여 cancel 메서드를 호출하면 됩니다.

 

타임아웃 (Timeout)

axios의 타임아웃을 설정하는 방법은 다음과 같습니다.

axios.get('/api/users', {
  timeout: 5000 // 5초 타임아웃 설정
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

 

위 코드에서는 timeout 옵션에 타임아웃 값을 설정하면 됩니다.

 

---

 

정리

 

axios는 매우 강력한 HTTP 클라이언트 라이브러리입니다. RESTful API를 작성하거나 외부 API와 통신할 때 매우 유용하게 사용할 수 있으며, 간단한 사용법과 다양한 기능을 제공하므로, 주니어 개발자들에게 추천할 만한 라이브러리 중 하나입니다.