Axios?
Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다.
Axios의 특징
- Axios는 운영환경에 따라서 브라우저간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용
- Promise(ES6) API를 사용
- 요청(Request) 응답 (reply)을 JSON 형태로 자동 변경
HTTP Methods?
클아이언트가 웹서버에게 사용자 요청의 목적/종류를 알려주는 수단
이 Method중에서 Axios로 통신하면서 가장 많이 사용되는 메소드들을 정리해보았다.
get
GET: 입력한 url이 존재하는 자원에 요청을 보낸다.
axios.get(url,[,config])
GET방식은 서버에서 어떤 데이터를 가져와서 보여줄것인가를 정하는 용도로 쓴다. 주소에 있는 쿼리스트링을 활용해 정보를 전달하는 것이고 GET 메서드는 값이나 상태등을 직접 바꿀수 없다.
const testData = await axios.get('https://localhost:3000/user')
console.log(testData.data)post
POST : 새로운 리소스를 생성(create)할 때 사용한다.
axios.post("url주소", {data객체}, [,config])
POST 메서드의 두 번째 인자엔 보낼 객체 데이터를 전달한다.
const postData = { name: "gildong", age: 33}
axios.post( 'https://localhost:3000/user', postData)
delete
REST 기반 API 프로그램에서 데이터베이스에 저장된 내용을 삭제하는 목적으로 사용된다.
axios.delete(url, [,config])
Delete메서드는 HTML Form태그에서 기본적으로 지원되는 HTTP 메서드가 아니다.
서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.
axios.delete('https://localhost:3000/user/1')put
REST 기반 API 프로그램에서 데이터베이스에 저장된 내용을 수정하기 위해 사용한다.
axios#put(url[, data[, config]])
https://localhost:3000/user/2:
{ name: 'Gobuk', age: 3}
putData = { name: 'Gobuk', age: 6 }
axios.put('https://localhost:3000/user/2', putData)