0. Axios, AJAX에 대한 조사

[hoyyChoi]

AJAX

• 웹서버와 통신할때 사용하는 기법으로 브라우저 내장 XMLHttpRequest 객체를 통해 웹 서버와 비동기적 통신을 중개하는 것
• 웹페이지를 리로드없이 부분 데이터만 불러올 수 있다.
• 경량화된 웹 서버 통신을 통해 데이터와 요청들을 분리하여 처리속도를 높임.(요청마다 리로드 x)
• AJAX 통신을 지원하는 라이브러리는 대표적으로 JQuery와 Axios가 있다.

Axios

• Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트다.
• 운영 환경에 따라 XMLHttpRequest 객체 또는 Node.js의 http API 사용
• Promise(ES6) 기반, HTTP 요청, 응답을 JSON 형태로 자동 파싱해줌.
• JSON 데이터 자동변환이 가능

Axios 문법

• get : axios.get('Api_url').then((res) => { console.log('list : ' + res); }) .catch((err) => { console.log(err); });

• post : axios.post('Api_url', { userName : '홍길동', age : 40 }).then((res) => { console.log('add person : ' + res); }) .catch((err) => { console.log(err); });

• delete : axios.delete('Api_url', { userName : 'carrtos' }).then((res) => { console.log('delete person : ' + res); }) .catch((err) => { console.log(err); });

• put : axios.put('Api_url', { userName : '홍길동', age : 45 }).then((res) => { console.log('update person : ' + res); }) .catch((err) => { console.log(err); });

• Axios는 데이터 전송방식별로 메소드를 지원하며, 저기에 주소쓰고 추가 설정만 입력하면 AJAX 통신이 가능하다.

• ES6 Promise 형태로 then, catch 를 통해 통신 성공, 실패를 컨트롤한다.

• 비동기 통신이기 때문에 ES8 async/await도 지원된다.

• 이렇게도 사용가능 : await axios({ method : 'POST', url : 'Api_url', data : { userName : '홍길동', age : 45 } })