Axios란 무엇인가?

서버와 통신하기 위해 사용하는 패키지.
공식문서) Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.

공식문서

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

Axios의 기본적인 사용법

axios 문법 구성

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

axios 파라미터 문법 예시

axios({
    method: "get", // 통신 방식
    url: "www.naver.com", // 서버
    headers: {'X-Requested-With': 'XMLHttpRequest'} // 요청 헤더 설정
    params: { api_key: "1234", langualge: "en" }, // ?파라미터를 전달
    responseType: 'json', // default
    
    maxContentLength: 2000, // http 응답 내용의 max 사이즈
    validateStatus: function (status) {
      return status >= 200 && status < 300; // default
    }, // HTTP응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정
    proxy: {
      host: '127.0.0.1',
      port: 9000,
      auth: {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    }, // proxy서버의 hostname과 port를 정의
    maxRedirects: 5, // node.js에서 사용되는 리다이렉트 최대치를 지정
    httpsAgent: new https.Agent({ keepAlive: true }), // node.js에서 https를 요청을 할때 사용자 정의 agent를 정의
})
.then(function (response) {
    // response Action
});

axios 응답 데이터

response.data: {}, // 서버가 제공한 응답(데이터)
 
response.status: 200, // `status`는 서버 응답의 HTTP 상태 코드
 
response.statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지
 
response.headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공
 
response.config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)
 
response.request: {}

GET와 POST 요청(단축 메서드)

get은 일반적으로 데이터 조회하거나 파람스를 보내서 요청할 때 쓰인다.

axios.get(url,[config]) 

post는 body에 데이터를 실어서 요청을 보낸다.

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

DELETE 요청(단축 메서드)

delete요청은 body를 필요로 하지 않는다.

axios.delete(url[, config])

PUT과 PATCH 요청(단축 메서드)

put과 patch 요청은 둘 다 데이터를 수정하는 요청을 보낼 때 사용한다.
put은 수정 요청을 보낼 때 데이터를 대체해버린다. (부분적으로 빈 값을 보내면 데이터가 비어버릴 수 있다.)
patch는 수정된 부분만 반영된다.

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

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