Axios , Ajax

Axios? Ajax?

• Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리.
• 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용(like Ajax)
• 비동기 통신 라이브러리를 사용하지 않으면 모든 코드가 순차적으로 처리되어야 하므로 코드 작성이 매우 복잡해짐. 따라서 비동기 통신을 쉽게 해주는 Axios나 Ajax가 자주 사용됨.

Ajax

• 비동기 자바스크립트란 의미로 Asynchronous JavaScript and XML의 약자.
• Ajax는 XMLHttpRequest 객체를 이용하여 화면을 새로 고침 하지 않고 변경된 일부 데이터만 로드하는 비동기 처리가 가능해짐.

Axios

• Axios는 Ajax와 유사하며 API를 이용한 통신을 할 때 주로 사용되고 Promise를 기반으로 만들어진 라이브러리.

• Fetch vs Axios

  • Fetch와 Axios 둘 다 HTTP 요청을 처리하기 위한 자바스크립트의 라이브러리.
  • Fetch는 자바스크립트에 내장되어 있어 별도의 설치가 필요하지 않지만 Axios의 경우 설치 과정이 필요합니다.
  • Fetch는 일부 예전의 인터넷 익스플로러 버전에서 지원하지 않는 경우가 있어, Axios가 Fetch보다 브라우저 호환성이 뛰어남.
  • Fetch에서는 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 Axios에서 지원해줍니다.

Axios의 CRUD

C : Create(생성) - POST
R : Read(조회) - GET
U : Update(수정) - PUT
D : Delete(삭제) - DELETE

모듈 설치없이 사용
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>코드를 입력하세요

Axios

1. POST : 자원 생성

axios.post(url, data 객체)

2. GET : 자원 요청

axios.get(url)

3. PUT : 자원 갱신

axios.put(url, data 객체)

4. DELETE : 자원 삭제

axios.delete(url)

ex)

axios.put('link', {"id" : "ryan" "password":"pw00"})
.then(res => console.log(res)) // res.data.token > 토큰 값 반환