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...🔥
'JS 공부 > 이론 정리' 카테고리의 다른 글
[JS] 타입스크립트를 내맘대로 써보고 느낀점(함수형에 객체지향 한컵 넣기) (0) | 2023.08.11 |
---|---|
[JS] JS에서 비동기처리가 왜 그렇게 중요할까? (0) | 2023.07.25 |
[JS] 호이스팅이 그래서 도대체 뭔데? (0) | 2023.07.17 |
[JS] var, let, const에 대해서 공부해보자. (0) | 2023.07.17 |