Axios란?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 아다.

설치 방법

$ npm install axios

기본 문법

axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
    foo: 'diary'
  }
});

Axios 인스턴스

사용자 지정 config로 새로운 Axios 인스턴스를 만들수 있다.
반복적으로 입력하는 url이나 기본 method 방식등을 지정해서 중복되는 코드를 줄일 수 있다.
오직 url만 필수이며 method를 지정하지 않으면 GET방식이 기본값이다.

// axios 인스턴스를 만들 때 구성 기본 값 설정
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 인스턴스가 생성 된 후 기본값 변경
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

axios 요청(request) 파라미터 옵션

• url : 서버 주소
• baseURL : url을 상대경로로 쓸대 url 맨 앞에 붙는 주소.
  예를들어, url이 /post 이고 baseURL이 https://some-domain.com/api/ 이면,
  https://some-domain.com/api/post로 요청 가게 된다.
• params : URL 파라미터 ( ?key=value 로 요청하는 url get방식을 객체로 표현한 것)

const instance = axios.create({
  baseURL: 'https://api.example.com',
  params: {
    api_key: "examplekey",
    language: "ko-KR",
  },
});

axios vs fetch

💭axios

써드파티 라이브러리로 설치가 필요	
XSRF 보호를 해준다.	
data 속성을 사용
data는 object를 포함한다
status가 200이고 statusText가 ‘OK’이면 성공이다
자동으로 JSON데이터 형식으로 변환된다
요청을 취소할 수 있고 타임아웃을 걸 수 있다.	
HTTP 요청을 가로챌수 있음
download진행에 대해 기본적인 지원을 함

💭fetch

현대 브라우저에 빌트인이라 설치 필요 없음
별도 보호 없음
body 속성을 사용
body는 문자열화 되어있다
응답객체가 ok 속성을 포함하면 성공이다
json()메서드를 사용해야 한다.
해당 기능 존재 하지않음
기본적으로 제공하지 않음
지원하지 않음