JS 공부/이론 정리

[JS] axios? 아씨오?

장아장 2023. 7. 17. 00:25

이거 아니야... 아씨오쓰야...

 

axios는 자바스크립트에서 비동기 통신방식이다. http의 요청과 응답을 처리할 수 있다. 

 

  • Promise 기반 : 비동기적으로 작업을 처리한다.
    • 요청을 보내고 응답을 기다리기도 하며, then을 이용한 후처리, catch를 이용한 실패시 처리 까지 수행시킬 수 있다.
  • http 요청 메서드 지원 : get, post, patch, delete, put등을 이용해 restful api를 만들 수 있다. 또한 여기서 get, delete과 같은 경우에는 body의 값을 요청에 넣어줄 수 없다는 경험으로 배운 특징이 있다. (대신 헤더, 세팅등은 넣을 수 있다)
  • 요청과 응답 인터셉터 : 요청의 헤더를 json화 시키거나, body에 넣을 객체를 미리 선언한 후 넣어서 처리할 수 있다.
  • 자동 데이터 변환 : 모든 데이터를 json으로 변환해준다. 이를 통해 요청과 응답을 자바스크립트에서 바로 console.log로 볼 수 있었다.

 

그러면 자바스크립트에서 axios는 어떻게 사용될까?

 

axios.요청메서드.then.catch의 구조로 동작하는데 요청메서드마다 특이점이 조금 존재한다. 

흔하게 사용하는 post, get, put, patch, delete에 대해서 이야기해보자. 

  • get, delete의 방식에서는, 메서드(url, options)의 구조로 동작된다. options에 헤더 설정, charset등의 설정을 추가하게 된다. 
  • post, put, patch는 body입력값을 넣을 수 있다. 

여기서 내가 제일 많이한 실수가 있다. 

get방식에서 백엔드 코드를 짤 때 requestBody를 몇 번 붙인적이 있었다. 

 

여러분들은 이런 실수 마시길....제발....

 

그럼..twenty thousand...🔥