FrontEnd/JavaScript

[JS] Axios를 통한 비동기 통신방법 정리 :: GET방식, POST방식 및 Axios문법

모찌바라기 2022. 9. 3. 11:26
728x90
반응형

 

 

 

 

 

Axios를 많이 쓰긴 했는데, 정확히 정리해놓은 게 없어서 정리해본다.

주로 많이 쓰이는 GET요청과 POST요청만 정리해봄..

 

 

npm trends에서 사용자들의 axios 다운로드 통계를 검색해보면

하루에 1000만건 ~ 3000만건의 다운로드 건수를 확인 할 수 있다.

 

우리가 보통 비동기통신하면 떠오르는 녀석들이 ajax, fetch API, axios인데

이 3개를 비교해보아도 axios가 압도적으로 많이 쓰이는 걸 알 수 있다. 

( 검색해보니, npm에서 fetch는 react 내장함수라고 하길래 react로 비교했다. )

 

 

Axios로 GET 요청하는 방법

 

주로 GET방식을 사용하는 상황

 

  • 단순 데이터를 요청하는 경우
  • 파라메터 데이터를 포함하여 URL을 요청하는 경우

 

 

기본문법

axios({
  url: '요청주소',
  method: 'get',
  params: {
    foo: 'bar'
  }
});

 

가장 기본적인 문법이다. 하지만 실제로 구글에 검색을 해보면 이 기본문법보다는 아래의 요약문법이 많이 쓰이는 것을

알 수 있다. 나도 실제 개발을 할때는 아래의 요약문법을 주로 사용한다.

 

 

요약문법

axios.get('요청주소', {
  params: {
    foo: 'bar'
  }
});

 

axios GET요청의 요약문법, 정확히는 요약이라기 보다 가독성이나 보기 명확하게 method를 분리하여

사용한 것 뿐이다.

 

실제로 이렇게 사용되는 경우가 훨씬 많다.

 

 

 

샘플코드

axios({
      url: '/com/read.do', // 요청URL
      method: 'get', // GET방식 선언
      params : { // params에 데이터를 담음
         popSub : 'mySub!!!'
      }
}).then(result=>{
    console.log(result);
});

 

네트워크

 

비동기통신후, 네트워크를 보면 요청 URL 뒤에 param 데이터를 붙여서 요청한 것을 확인 할 수 있다.

 

params란  'read.do?popSub=mySub!!' 과 같은 URL의 GET방식을 객체화 한것이라고 이해하면 된다.

 

(중요) axios의 GET방식에서는 데이터를 Body에 담아서 보낼 수 없다는 것을 명심하도록 하자.

 

추가설명을 하자면 GET방식에서 Body에 데이터를 담아서 서버요청을 해도 에러가 발생하지는 않지만

해당 값은 빈값으로 받게 된다.

 

 

 

Axios로 POST요청하는 방법

 

 

기본문법

axios({
  url: '요청주소',
  method: 'post',
  data: {
    데이터명: '데이터값'
  }
});

 

 

요약문법

axios.post('요청주소', {
    foo: 'bar'
});

//아래와 같이 데이터 객체가 있다면 그냥 객체만 넣어줘도 된다.

data = {
	foo : 'bar'
}

axios,post('요청주소', data);

 

method요청방식이 get에서 post로 변경된 것만 빼면

axios의 GET방식과 크게 다르지 않으므로 따로 설명은 하지 않겠다. 

 

위의 코드에는 따로 설정되어 있지 않지만 아래와 같이 파라메터를 넣어주면 된다.

 

Axios 파라메터 설정
1번째 파라메터 : 요청주소(URL)
2번째 파라메터 : 바디(Body)
3번째 파라메터 : 헤더(Header)

 

 

GET방식을 잘 안쓰다보니 params 데이터를 보내는 걸 깜빡한 김에 정리해보았다.

 

728x90
반응형