Axios

mingggkeee·2022년 5월 10일
0

HTTP 통신 : axios

  • Vue에서 권고하는 HTTP 통신 라이브러리는 axios이다.
  • Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어있고 API가 다양하다.
    • Promise란 서버에 데이터를 요청해 받아오는 비동기 로직 처리에 유용한 자바스크립트 라이브러리이다. 자바스크린트는 단일 스레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려 주지 않음. -> 따라서 데이터를 요청하고 받아올 때 까지 기다렸다가 화면에 나타내는 로직을 구성해야 할 때 Promise를 활용한다.
    • 데이터를 받아왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행한다.

axios 설치

  • CDN 방식 : <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  • NPM 방식 : npm install axios

axios API

  • axios.get('URL 주소').then().catch() : 해당 URL 주소에 대해 HTTP GET 요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의된 로직이 실행되고, 데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 실행됨
  • axios.post('URL주소').then().catch() : 해당 URL 주소에 대해 HTTP POST 요청을 보낸다. then()과 catch()방식은 get방식과 같다.
  • axios({옵션 속성}) : HTTP 요청에 대한 자세한 속성들을 직접 정의해서 보낼 수 있음.
profile
만반잘부

0개의 댓글