[axios] axios로 API 사용하기

📌 axios

브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리입니다.

➡️ 특징

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

이러한 특징들 때문에 fetch 대신 많이 쓰이기도 합니다. axios는 json으로 자동 변환을 해주기 때문에 더 간편하게 쓸 수 있기도 합니다.

✏️ axios 설치하기

npm install axios

yarn add axios

터미널에 명령어로 설치해줍니다

✏️ axios get 문법

서버로부터 데이터를 받아옵니다

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345')
    console.log(response)
  } catch (error) {
    console.error(error)
  }
}

✏️ axios post 문법

서버에 데이터를 전송합니다

const PostUser = () => {
	const data = {
      firstName: 'Fred',
      lastName: 'Flintstone'
    }
    
    axios.post("/user", data)
    	.then((response => {
        	console.log(response)
        })
        .catch((error) => {
        	console.log(error)
        })
}

✏️ axios put 문법

서버에 있는 데이터를 수정합니다

const PutUser = () => {
	const data = {
      firstName: 'Fred',
      lastName: 'Flintstone'
    }
    
    axios.put("/user", data)
    	.then((response => {
        	console.log(response)
        })
        .catch((error) => {
        	console.log(error)
        })
}

✏️ axios delete 문법

서버에 있는 데이터를 삭제하고, 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])

⛓️ 참고사이트