브라우저와 node.js
에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리입니다.
• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원
이러한 특징들 때문에 fetch 대신 많이 쓰이기도 합니다. axios는 json으로 자동 변환을 해주기 때문에 더 간편하게 쓸 수 있기도 합니다.
npm install axios
yarn add axios
터미널에 명령어로 설치해줍니다
서버로부터 데이터를 받아옵니다
async function getUser() {
try {
const response = await axios.get('/user?ID=12345')
console.log(response)
} catch (error) {
console.error(error)
}
}
서버에 데이터를 전송합니다
const PostUser = () => {
const data = {
firstName: 'Fred',
lastName: 'Flintstone'
}
axios.post("/user", data)
.then((response => {
console.log(response)
})
.catch((error) => {
console.log(error)
})
}
서버에 있는 데이터를 수정합니다
const PutUser = () => {
const data = {
firstName: 'Fred',
lastName: 'Flintstone'
}
axios.put("/user", data)
.then((response => {
console.log(response)
})
.catch((error) => {
console.log(error)
})
}
서버에 있는 데이터를 삭제하고, get과 비슷하게 쓰임
async function deleteUser() {
try {
const response = await axios.delete('/user?ID=12345')
console.log(response)
} catch (error) {
console.error(error)
}
}
이외에도 다양한 메소드가 있습니다.
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
axios#getUri([config])
⛓️ 참고사이트