Axios

학습 키워드

• Axios

  • Ajax

  • Fetch vs Axios

• 사용법

Axios

• Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 (HTTP 비동기 통신 클라이언트)

특징

• 브라우저를 위해 XMLHttpRequests 생성

• node.js를 위해 http 요청 생성

• Promise API를 지원

• 요청 및 응답 인터셉트

• 요청 및 응답 데이터 변환

• 요청 취소

• ✅ JSON 데이터 자동 변환

• XSRF를 막기위한 클라이언트 사이드 지원

🤔 왜 Axios를 사용하는 이유?

우선 React는 비동기 통신을 위한 HTTP Client를 구현하기 위한 기능이 제공 되지 않는다. 따라서 React Ajax를 구현하기 위해서는 JavaScript 내장 객체인 XMLRequest를 사용하거나 , 다른 HTTP Client를 사용 해야 한다.

브라우저가 제공하는 Fetch API를 사용해도 되지만 보다 더 많은 기능을 제공해서 사람들의 선호도가 높아 많이 사용된다.

📖 Ajax

• 브라우저가 갖고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로고침 하지 않아도 페이지의 일부분만을 위한 데이터를 로드하는 기법

• JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고 받는 기술

Fetch vs Axios

	Fetch	Axios
유형	브라우저 빌트인	써드파티 라이브러리
데이터	data 속성을 사용	body 속성을 사용
데이터 타입	data는 object를 포함한다.	body는 문자열화 되어있다.
응답	status가 200이고 statusText가 ‘OK’이면 성공이다.	응답객체가 ok 속성을 포함하면 성공이다.
json	자동으로 JSON데이터 형식으로 변환	.json()메서드를 사용
요청 커스텀	요청을 취소할 수 있고 타임아웃을 걸 수 있다.	해당 기능 존재 하지않음
HTTP 요청	HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
download	download 진행에 대해 기본적인 지원을 함	지원하지 않음
지원 브라우저	좀 더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+

⚙️ 설치 및 사용법

npm install axios

get 요청

// Promise chaining
axios
  .get('/user', {params : { ID : 12345 },
  })
  .then((response) => console.log(response))
  .catch((error) => console.log(error) )
  .then(() => console.log('done'));

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

post 요청

// Promise chaining
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// async await
async function postUser() {
  try {
    const response = await axios.post('/user',  {
    firstName: 'Fred',
    lastName: 'Flintstone'
  });
  return response.data;

  } catch (error) {
    console.log(error);
  }
}

🔗 참고

• fetch와 axios 차이점과 비교
• axios 개념, Fetch API와의 차이점 (+axios 사용하기)
• Axios - HTTP 비동기 통신 라이브러리