회사 업무를 진행하면서,
특정 API에 파라미터 값을 보낸 뒤 데이터를 받아와야 하는 코드를 작성해야 했다 !!!
외부 API와 내 소스코드를 어떻게 연동해야하는지 찾아보던 중, Axios를 사용하면 된다는 것을 알아냈다 ~~~ 😬
📝 Axios란?
Axios는 JavaScript에서 사용되는
HTTP 클라이언트 라이브러리이다.
Axios는간편한 API를 제공하며,HTTP 요청을 보내고 응답을 받는 데사용되며, 다양한 기능을 제공하여 데이터를 가져오거나 보내는 데 유용하다!!
📝 Axios의 특징
-
Promise 기반: Axios는 Promise 기반 API를 사용하여 비동기 작업을 처리합니다. 이를 통해 비동기 코드를 간편하게 작성할 수 있습니다.
-
브라우저와 Node.js 호환: 웹 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. 이러한 호환성으로 인해 클라이언트 및 서버 측에서 일관된 코드를 작성할 수 있습니다.
-
요청과 응답의 변환: Axios는 자동으로 요청과 응답 데이터를 변환할 수 있습니다. 예를 들어 JSON 데이터를 자동으로 JavaScript 객체로 변환하거나, FormData로 직렬화한 데이터를 자동으로 처리할 수 있습니다.
-
요청 취소: Axios는 요청을 취소할 수 있는 기능을 제공합니다. 이를 통해 요청이 완료되기 전에 중단하거나, 중복 요청을 방지할 수 있습니다.
-
인터셉터: Axios는 요청과 응답을 인터셉트하고 수정할 수 있는 기능을 제공합니다. 이를 통해 요청 전에 헤더를 수정하거나 응답을 가공할 수 있습니다.
📌 Axios와 Fetch
Axios 외에 Fetch라는 도구도 Javascript에서 HTTP 요청을 처리하기 위해 사용 된다고 한다 !!
둘다 HTTP 요청을 처리하기 위해 사용된다는 공통점이 있지만, Axios는 브라우저와 Node.js 환경 모두에서 일관된 코드를 작성할 수 있다는 장점이 있고 더 많은 기능을 제공한다.
그에 비해 Fetch는 웹 표준으로 내장되어 있어 추가 패키지를 설치하지 않아도 되며, 더 경량화 된 라이브러리이다.
따라서, 간단하게 사용하려면 Fetch를, 확장성을 염두했을때는 Axios를 사용하는게 좋다고 한다.
둘다 장단점이 있어서.. 원하는 방식으로 사용하면 될 것 같다 !! 둘의 차이점을 자세하게 정리한 표가 있어서 아래에 첨부했다.
📝 Axios 사용법
하여튼 나는 Axios를 사용할 예정이기 때문에, 해당 내용만 정리하려고 한다.
📌 Axios 패키지 설치하기
앞서 말했던 것 처럼 Axios를 사용하기 위해서는 패키지 설치가 필요하다 !!
npm install axiosNode.js 서버에 axios 라이브러리를 설치해줬다
📌 Axios import
const { default: axios } = require('axios');다음으로, axios를 이용해 코드를 구현 할 controller 내부에 Axios를 import 해 줬다.
이제 사용 할 준비 완료 !!
📌 Axios 사용 예제
axios({
url: 요청 url,
method: 매소드 처리 방식,
data: {
요청 본문에 보낼 데이더 지정
}
})
.then(response => {
//성공시 구현 될 코드
consol.log(response.data)
})
.catch(error => {
//실패시 구현 될 코드
console.error(error);
});나는 성공 핸들링과 에러 핸들링 부분만 추가 했지만, .finally 부분도 추가 가능 하다고 한다.
그리고 꼭 위 같은 방식으로 할 필요 없이 공식 문서 확인 해 보면 다양한 방법으로 사용하기 때문에,
기호에 맞게 사용하면 될 것 같다.
📌 Axios의 파라미터 옵션
내가 위에서 사용한 파라미터 옵션은 url, method, datea 총 3개가 있지만, 그 외에도 많다 !!!
-
method: HTTP 메서드를 지정합니다. 기본값은 "GET"입니다. 일반적으로는 "GET", "POST", "PUT", "DELETE" 등을 사용합니다.
-
url: 요청을 보낼 URL을 지정합니다.
-
params: 쿼리 매개변수를 지정하는 객체입니다. 예를 들어, { page: 1, limit: 10 }와 같이 설정하면 URL에 ?page=1&limit=10과 같은 쿼리 문자열이 추가됩니다.
-
data: 요청 본문에 보낼 데이터를 지정합니다. 일반적으로 POST 또는 PUT 요청과 함께 사용됩니다. JavaScript 객체, FormData, ArrayBuffer, 문자열 등의 형식을 지원합니다.
-
headers: 요청 헤더를 지정하는 객체입니다. 일반적으로는 Content-Type, Authorization 등의 헤더를 설정합니다.
-
paramsSerializer: params 객체를 직렬화하는 데 사용되는 함수입니다. 기본적으로는 qs 라이브러리를 사용하여 객체를 쿼리 문자열로 변환합니다.
-
timeout: 요청 타임아웃 시간(밀리초)을 지정합니다. 일정 시간 내에 응답이 없을 경우 요청이 취소됩니다.
-
cancelToken: 요청을 취소할 수 있는 토큰 객체를 지정합니다. CancelToken 생성자를 사용하여 생성한 토큰을 전달하여 요청을 취소할 수 있습니다.
-
auth: 요청에 대한 인증 정보를 설정합니다. { username: 'username', password: 'password' }와 같이 사용합니다.
-
responseType: 응답 데이터의 유형을 지정합니다. 기본값은 "json"이며, "arraybuffer", "blob", "document", "text" 등을 설정할 수 있습니다.
-
validateStatus: 응답 상태 코드를 검증하기 위한 함수를 지정합니다. 함수에서 true를 반환하면 응답이 성공으로 간주됩니다.
주로 사용하는건 method, url, headers, data, params, responType 이 정도라고 한다 ~~ ㅎㅎ
📌 Axios의 응답 정보 종류
이렇게 데이터를 보내면 다양한 응답 정보를 받게 되는데, 응답 정보의 종류는 다음과 같다.
-
data: 서버에서 반환된 실제 데이터입니다. JSON 형식일 수도 있고, 다른 형식의 데이터일 수도 있습니다. 대부분의 경우 이 정보를 사용하여 서버의 응답 데이터를 처리합니다.
-
status: 서버의 응답 상태 코드입니다. 일반적으로 HTTP 상태 코드인 200, 400, 500 등이 사용됩니다. 응답 상태 코드를 통해 요청이 성공했는지, 실패했는지 등을 확인할 수 있습니다.
-
statusText: 응답 상태 코드에 대한 설명입니다. 예를 들어, 200에 대한 상태 텍스트는 "OK"입니다.
-
headers: 서버에서 반환된 응답 헤더 정보입니다. 일반적으로는 응답 헤더에 있는 다양한 정보(예: Content-Type, Cache-Control 등)를 사용할 수 있습니다.
-
config: Axios 요청에 사용된 구성 옵션 정보입니다. 예를 들어, 요청에 사용된 URL, 메서드, 요청 데이터 등의 정보가 포함됩니다.
-
request: 실제로 보낸 Axios 요청에 대한 정보입니다. 주로 요청 헤더 및 요청 데이터와 관련된 정보를 포함합니다.
-
request: 요청에 대한 에러 정보입니다. 요청이 실패한 경우에만 해당됩니다. 주로 네트워크 오류 또는 HTTP 상태 코드 오류와 관련된 정보를 포함합니다.
📌 다중 Axios 처리
추가로, 한번에 하나의 요청만 실시하는것이 아닌 동시 요청 처리도 가능하다고 하니 참고하면 좋을 것 같다!
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
Promise.all([getUserAccount(), getUserPermissions()])
.then(function (results) {
const acct = results[0];
const perm = results[1];
});
👀 참고자료
