[Axios] Axios 사용법

🎯 Axios 사용법

• 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리이다.
• 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것으로 Ajax처럼 사용되는 것
• 비동기 통신 라이브러리를 사용하지 않으면 모든 코드가 순차적으로 처리되어야 하므로 코드의 순서를 신경 써서 작성해야 한다.
• React에서 OpenAPI를 이용한 통신을 할 때 Axios를 주로 사용

 

📝 Fetch vs Axios

• Fetch와 Axios 둘 다 HTTP 요청을 처리하기 위한 자바스크립트의 라이브러리이다.
• Fetch의 경우 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요하지 않다.
• Axios의 경우 설치 과정이 필요하다.
• Fetch는 일부 예전의 인터넷 익스플로러 버전에서 지원하지 않는 경우가 있어, Axios가 Fetch보다 브라우저 호환성이 뛰어나다.
• Fetch에서는 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 Axios에서 지원해준다.
• 자신의 개발 상황(지원하는 브라우저, 기타 다른 패키지 등등)에 맞는 라이브러리를 선택하는 것이 필요하다.

 

📝 Axios CDN

<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 POST - Create

axios.post(url, data 객체)

• POST는 새로운 자원을 생성할 때 사용한다. ⇒ Create

 

🛠 예제 코드

function axiosPost() {
  const token = document.getElementById("token");

  const loginData =  { "email": "eve.holt@reqres.in", "password": "cityslicka" };


  axios.post('https://reqres.in/api/login', loginData)
    .then(response => {
        console.log(response)
        token.innerHTML = response.data.token;
    });
}

export default axiosPost;

• 올바른 이메일과 비밀번호로 POST 요청을 보내면 적절한 토큰 값을 반환해준다.
• axios.post() 사용하고 .then을 이용하면 요청에 성공했을 때 반환되는 값을 얻을 수 있다.
  • response 객체는 반환되는 데이터, HTTP 상태 코드, 헤더 정보 등 여러 정보를 가지고 있다.
  • 데이터 정보를 얻고 싶으면 response.data
  • HTTP 상태 코드를 얻고 싶으면 response.status

 

📝 Axios GET - Read

axios.get(url)

• GET은 자원을 요청할 때 사용한다. ⇒ Read

 

🛠 예제 코드

function axiosGet() {
  const name = document.getElementById("name");
  const email = document.getElementById("email");

  axios.get('https://reqres.in/api/users/2')
    .then(response => {
        console.log(response.data.data)
        name.innerHTML = `${response.data.data.first_name} ${response.data.data.last_name}`
        email.innerHTML = response.data.data.email
    })
}

export default axiosGet;

 

📝 Axios PUT - Update

axios.put(url, data 객체)

• PUT은 자원을 갱신할 때 사용한다. ⇒ Update

 

🛠 예제 코드

function axiosPut() {
  const name = document.getElementById("name");
  const email = document.getElementById("email");
  const updateDate = document.getElementById("update_date");

  const updateDataObj = { "first_name": "White", "last_name": "Rabbit" , "email": "alice@elice.io" };

  axios.put('https://reqres.in/api/users/2', updateDataObj)
    .then(response => {
        name.innerHTML = `${response.data.first_name} ${response.data.last_name}`;
        email.innerHTML = response.data.email;
        updateDate.innerHTML = new Date()
    })
}

export default axiosPut;

• 데이터의 전체가 아닌 일부 데이터만 수정하고 싶다면 axios.patch()를 이용할 수 있다.
  • PATCH는 넘겨준 데이터만 변경되고 기존 데이터는 유지된다.

 

📝 Axios DELETE - Delete

axios.delete(url)

• DELETE는 자원을 삭제할 때 사용한다. ⇒ Delete

 

🛠 예제 코드

function axiosDelete() {
  const status = document.getElementById("status");

  axios.delete('https://reqres.in/api/users/2')
    .then(response => status.innerHTML = response.status)
}

export default axiosDelete;

• 삭제 후 별다른 데이터를 넘겨주지는 않기 때문에 이번에는 HTTP 응답 코드를 통해 요청이 잘 되었는지 확인해보자.

 

📌 참고

• Getting Started