axios

axios란?

http client library. XHR을 이용한 HTTP 요청을 Promise 기반으로 처리합니다.

즉, 우리가 XHR을 다루지 않고도 ajax 호출을 가능하게 해줍니다.

 

fetch API보다 Axios가 더 좋은 점은 아래와 같습니다.

1. 구형 브라우저 지원(IE8~)

2. 요청 중단 가능

3. 응답시간 초과 설정방법 있음.

4. CSRF 보호 기능 내장.

5. JSON 데이터 자동변환

6. 브라우저 뿐만 아니라 Node.js 사용 가능

 

1. 요청

1-1. 합쳐서 아래와 같이 기술 가능.

axios({
  url: 'https://test/api/cafe/list/today',
  method: 'get',
  data: {
    foo: 'diary'
  }
});

url : 요청하는 주소

method : 요청하는 방식

data : 보내는 데이터

 

1-2. 보기 명확하도록 method를 분리하여 사용가능

axios.get()
axios.post()
axios.delete()
axios.patch()
axios.put()
axios.options()

 

1-3. get요청에 params 추가

axios.get('https://test.com/', {
  params: {
    foo: 'bar'
  }
});

 

2. 응답 객체

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