[JS] Axios

🎈 Axios 란

Promise API를 활용하는 HTTP 비동기 통신 라이브러리

🔰 Axios를 쓰는 이유

1. 요청과 응답을 JSON 형태로 자동 변환해준다.
2. 문법이 간소화
3. Response Timeout 설정가능
4. Request 취소 가능
5. HTTP Requests 의 Intercept 가능
6. 구형 브라우저 호환성
7. XSRF Protection 보안 기능 제공

🔰 설치

Using npm:
$ npm install axios

Using bower:
$ bower install axios

Using yarn:
$ yarn add axios

Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

🔰 import

import axios from 'axios'

🎈 기본 문법

axios({
  url: 'URL',
  method: 'get|post|put|patch|delete 등..',
  data: {
    키: '값',
    키: '값',
  }
})
.then((response) => {
  // 성공시
})
.catch((error) => {
  // 실패시
})
.finally(() => {
  // 항상
})

🔰 요청 파라미터 옵션

요청	설명
method	요청 방식 (미지정시 get)
url	서버 주소
baseURL	url이 상대경로일 때, url 앞에 붙는 주소
header	요청 헤더
data	body에 실을 데이터
responseType	서버가 응답해주는 데이터의 타입 (json, text 등)
withCredentials	cross-site access-control 요청 허용 유무 (true일 때 cross-origin으로 쿠키값 전달)

---

기본 형식에는 객체 옵션이 너무 많아
이를 줄일 수 있도록 Axios 단축 메소드를 제공한다.

GET : axios.get(url[, config])
POST : axios.post(url, data[, config])
PUT : axios.put(url, data[, config])
DELETE : axios.delete(url[, config])

🎈 GET 요청

그냥 URL에 요청을 보내거나, 파라미터에 데이터를 포함시켜서 보낼 수 있다.

const axios = require('axios');

axios.get('url', {
      params: {
      ID: 12345
    }
  })
  .then((response) => {
    // 성공시
  })
  ...
  
// 또는
axios.get('/user?ID=12345')
  ...

🎈 POST 요청

데이터를 Message Body에 포함시켜 보낸다.

axios.post('url', {
    키: '값',
    키: '값',
  })
  ...

🎈 DELETE 요청

GET과 같이 그냥 URL로 요청을 보내거나,
파라미터에 데이터를 포함시켜서 보낼 수 있다.

axios.delete('url')
  ...

// 또는
  
axios.delete('url',{
    data: {
      키: 값,
      키: 값,
      키: 값,
    }
  })

🎈 여러개의 요청 동시 수행

const 요청1 = () => {
  return axios.get('요청url1');
}

const 요청2 = () => {
  return axios.get('요청url2');
}

axios.all([요청1(), 요청2(), …])
  .then(() => {
  const 결과1 = result[0];
  const 결과2 = result[2];
  …
  })

🎈 응답 데이터

서버로부터 응답 받은 response 객체는 아래와 같이 구성되어 있다.

{
  data: {},          // 응답 데이터

  status: 200,       // HTTP 상태 코드

  statusText: 'OK',  // HTTP 상태 메시지

  headers: {},       // 헤더

  config: {},        // 요청을 위해 `axios`가 제공하는 구성

  request: {}        
  // `request`는 응답을 생성한 요청
  // 브라우저: XMLHttpRequest 인스턴스
  // Node.js: ClientRequest 인스턴스(리디렉션)
}