[Axios] 리액트에서 Axios 알고 쓰기!

axiosDoc

Axios란?

Axios는 node.js와 브라우저에서 사용되는 프로미스 기반 HTTP 클라이언트입니다.

🔎 axios는 isomorphic한 특성을 가지고 있습니다.

• node.js(server)의 내장 http 모듈을 사용
• 브라우저(client) 측에서는 XMLHttpRequest를 사용

axios의 isomorphic한 특성

node.js와 브라우저 모두에서 http 요청을 처리할 수 있습니다.

• node.js(server)의 내장 http 모듈을 사용
• 브라우저(client) 측에서는 XMLHttpRequest를 사용

---

프로미스 기반 HTTP 클라이언트

axios.get('/api/data')
  .then(response => {
    // 성공적으로 응답 받았을 때 처리할 로직
    console.log(response.data);
  })
  .catch(error => {
    // 요청이 실패했을 때 처리할 로직
    console.error(error);
  });

위의 코드에서 axios.get('/api/data')는 서버로 GET 요청을 보내는 비동기 작업을 시작합니다. 이 작업은 프로미스를 반환하며, .then() 메서드를 사용하여 성공적인 응답을 처리하고 .catch() 메서드를 사용하여 요청이 실패했을 때의 오류를 처리합니다.

이와 같이 프로미스 기반 HTTP 클라이언트는 비동기 작업을 보다 구조적으로 다룰 수 있도록 도와줍니다. 프로미스를 사용하면 요청과 응답의 순서를 명확하게 표현할 수 있으며, 에러 처리 등의 추가적인 로직을 쉽게 구현할 수 있습니다.

• 요청과 응답을 가로채고 처리할 수 있습니다.
• 요청과 응답 데이터를 변환할 수 있습니다.

---

이외에 다양한 기능 지원

예시로 자세히 살펴보기

데이터 직렬화와 포맷 지원:

• 중첩된 항목을 지원하는 쿼리 파라미터 직렬화를 지원합니다.
• 요청 바디를 자동으로 다음과 같이 직렬화할 수 있습니다

  1. JSON : application/json
  2. Multipart / FormData : multipart/form-data
  3. URL 인코딩된 폼 : application/x-www-form-urlencoded

• HTML 폼을 JSON으로 게시하는 기능을 지원합니다.

응답 처리:

• 응답에서 자동으로 JSON 데이터를 처리합니다.

진행 상황 및 대역폭 제한:

• 브라우저와 노드.js에서 진행 상황을 캡처하고 추가 정보(속도, 남은 시간 등)를 제공합니다.
• 노드.js의 대역폭 제한을 설정할 수 있습니다.

호환성과 보안 기능:

• FormData 및 Blob과 호환됩니다.
• 클라이언트 측에서 XSRF(CSRF)에 대한 보호 기능을 지원합니다.

취소 및 타임아웃 설정

• 요청을 취소할 수 있습니다.
• 타임아웃을 설정할 수 있습니다.

---