axios 여러개 요청하는 방법은?

우선, 간략하게 axios에 대해서 알아보자.

 

axios??

 

 

 

 

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리로,
쉽게 말해서 backend, frontend 통신을 쉽게 하기 위해 Ajax와 더불어 사용한다.
자바스크립트에는 fetch api 가 있지만, 프레임워크에서 ajax를 구현할때는 axios를 쓴다.

 

 

사용할때는 터미널에 이렇게 axios를 설치해주면 된다.

 

 

npm install axios

 

axios 특징
-운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
Promise(ES6) API 사용한다.
-요청과 응답 데이터의 변형한다.
-HTTP 요청 취소한다.
-HTTP 요청과 응답을 JSON 형태로 자동 변경한다.

 

 

다음은 fetch와 다른 부분이다. 참고해보자.

 

 

 

 

 

 

 

 

 

axios을 사용하던 중 여러 번 API를 가져와야 할 때 어떻게 해야하나 하고

살펴보았다.

왜냐하면 method get를 가져올때 여러번 비슷하게 썼더니

에러가 발생했기 때문이다......

 

axios 여러개 요청하는 법은 아래와 같다.

바로, axios.all을 이용하는 것이다.

 

 

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

 

 

활용해보자면,

 

 

 

리스트의 모든 axios 통신이 처리되었을 때, 해당 블록안의 명령어가 실행되기 때문에 안정적으로 스레드 관리가 가능하다.

 

대략 어떤식으로 사용하는 방법을 알긴 하겠는데,, 응용을 잘 해낼지 모르겠다,,

자신은 없지만 계속 시도해보고 써먹어봐야겠다.

 

 

https://yamoo9.github.io/axios/guide/usage.html#get-%EC%9A%94%EC%B2%AD

사용법 | Axios 러닝 가이드