axios

Axios

1. Axios 란?

• Axios: Promise를 기반으로 만들어진 HTTP 비동기통신 라이브러리
• 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 Ajax처럼 사용
• 비동기 통신 라이브러리를 사용하지 않으면, 모든 코드가 순차적으로 처리되어야 하므로 코드의 순서를 신경 써서 작성해야함.
• 즉, 코드 작성이 매우 복잡해짐. 따라서 비동기 통신을 쉽게 해주는 Ajax를 자주 사용함.

2. Fetch vs Axios

• Fetch와 Axios 둘 다 HTTP 요청을 처리하기 위한 자바스크립트의 라이브러리

몇 가지 차이점

• Fetch: 자바스크립트에 내장 함수, 별도의 import나 설치가 필요하지 않다.
• Axios: 추가로 라이브러리를 설치해야 한다.
• Fetch는 일부 예전의 인터넷 익스플로러 버전에서 지원하지 않는 경우가 있어, Axios가 브라우저 호환성이 뛰어나다.
• Fetch에서는 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 등을 Axios에서 지원해준다.
• Axios는 외부 모듈로 따로 패키지 설치를 해줘야 사용할 수 있으니, 여의치 않다면 fetch를 사용
• 자신의 개발 상황(지원하는 브라우저, 기타 다른 패키지 등등)에 맞는 라이브러리를 선택하는 것이 필요

3. Axios 사용법

• html에 두 스크립트를 추가해 axios 라이브러리를 사용한다.

<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.get.then((response))
• axios.post.then((response))
• axios.put.then((response))
• 위의 세 데이터의 response가 같은 데이터 구조로 돼있다는 보장은 없다.

GET

• GET은 자원을 요청할 때 사용
• axios.get(url)

axios.get('https://reqres.in/api/users/2')
  .then((response) => {
      let res = response.data.data;
      name.innerHTML = res.first_name + " " + res.last_name;
      email.innerHTML = res.email;
}); 

POST

• POST는 새로운 자원을 생성할 때 사용
• axios.post(url, data 객체)

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

axios.post("https://reqres.in/api/login", login).then((response) => {
    let res = response.data.token;
    token.innerHTML = res;
  });

PUT

• axios.put(url, data 객체)
• PUT은 자원을 갱신할 때 사용

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

  axios.put("https://reqres.in/api/users/2", updateData).then((response) => {
    let res = response.data;
    name.innerHTML = res.first_name + " " + res.last_name;
    email.innerHTML = res.email;
    updateDate.innerHTML = res.updatedAt;
  });

DELETE

• axios.delete(url)
• DELETE는 자원을 삭제할 때 사용합니다.

  axios.delete("https://reqres.in/api/users/2").then((response) => {
    console.log(response);
    status.innerHTML = response.status;
  });