axios

• node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트
• 백엔드와 프론트엔드 간의 HTTP통신을 위한 라이브러리

특징

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

fetch와의 차이

• axios는 라이브러리를 따로 설치해야 한다. (fetch는 자바스크립트에 포함되어있음)
• axios는 요청 인터셉트 및 취소가 가능하다. (fetch는 불가능)
• axios는 JSON데이터로 자동 변환이 가능하다. (fetch는 .json()처리를 해주어야 함)
• axios는 XSRF 보호를 해준다. (fetch는 별도의 보호가 없다.)

설치

• npm install axios

사용방법

• 요청 메소드를 따로 작성
  • method를 따로 지정하지 않으면 기본값으로 get이 된다.

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

• 요청 메소드 명령어 사용
  axios.get(url[, config])
  • TypeScript 사용 시 response.data의 타입을 지정해야 한다.
    → 메소드 명령어 옆에 제네릭으로 타입을 선언해준다.
  • catch로 에러핸들링 가능

axios.get<Type>(url)
  .then(response => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

axios.post(url[, data[, config]])

• body로 전달할 데이터를 url 다음에 넣는다.

axios.post<Type>(url,{name: 'kim'},{
  headers: { Content-Type: `application/json` } 
}).then(
  response => console.log(response.data);
);

//데이터로 보낼 객체를 따로 정의해서 보내도 된다.
const dataObj = {name: 'kim'};
axios.post<Type>(url,dataObj,{
  headers: { Content-type: `application/json` } 
}).then(
  response => console.log(response.data);
);

axios.patch(url[, data[, config]])

axios.patch<Type>(url,{name: 'kim'},{
  headers: { Content-type: `application/json` } 
}).then(
  response => console.log(response.data);
);

axios.delete(url[, config])

axios.delete<Type>(url, {
  headers: { Content-Type: `application/json`},
})
.then(response => {
  console.log(response.data);
});

• axios.delete에 body로 데이터 넣기

axios.delete<string>(url, {
  data: { 여기 넣기 },
  headers: { Content-type: `application/json` },
})

출처)
axios-http.com
inpa.tistory - AXIOS-📚-설치-사용