axios

Axios 개념

Axios는 HTTP통신을 하는데 매우 인기있는 javascript 라이브러리이다. Axios는 브라우저와 node.js 플랫폼에서 모두 사용할 수 있다.
또한 IE8이상을 포함한 모든 최신 브라우저를 지원한다. Axios는 Promise를 기반으로 하여 async/await문법을 사용하여 XHR요청을 매우 쉽게 할 수 있다.

Fetch API 대비 장점

• 구형브라우저를 지원한다. (Fetch의 경우 폴리필이 필요)
• 요청을 중단시킬 수 있다.
• 응답 시간 초과를 설정하는 방법이 있다.
• CSRF 보호 기능이 내장되어있다.
• JSON 데이터 자동 변환
• node.js에서의 사용

설치

npm install axios

Axios API

axios({
  url: 'http://url',
  method: 'get',
  data: {
    data: 'data',
  },
})

기본적인 요청방법이며 명확하게 method 분리 가능

• axios.get()
• axios.post()

매개 변수 추가

axios.get(`http://www.hi.com/?abc=def');

요청시 간단하게 매개변수를 추가 할 수 있다

axios.get('http://www.hi.com/', {
  params: {
    abc: 'def
  }
});

또는 params 옵션에 추가하여 사용할 수 있다.

get 불러오기

axios.get('/api').then(res => {
  console.log(res.data)
})

axios요청 시 파라미터 정보가 아니라 메소드의 두번째 인자인 config 객체로 요청값을 넘길 수 있다

axios.get('/api', {
  params: { title: '하이'},
  headers: { 'A-Key' : 'my-key'},
  timeout: 1000 // 1초 이내 응답이 없으면 에러 처리
  .then(res => {
    console.log(res.data)
  })

post 값 입력하기

axios.post('/api', { title: '하이' }).then(res => {
  console.log(res.data)
})

서버의 데이터 리스트의 마지막에 지금 넘기는 정보를 추가한다.
이외 patch(특정 값 수정하기) delete(특정 값 삭제하기) 등이 있다.