베껴온 사이트

해당 글은 아래 링크 글을 베껴온 글입니다. 해당 링크가서 보시는 걸 추천드립니다!
인파_ - [AXIOS] 📚 axios 설치 & 특징 & 문법 💯 정리
axios Docs

Axios란?

• 브라우저, Node.js를 위한 Promise 기반 API를 활용하는 HTTP 비동기 통신 라이브러리
• 백엔드와 프론트엔드랑 통신을 쉽게하기 위해 ajax와 같이 사용된다.
• 프레임워크에서 ajax를 구현할 때 axios를 쓰는 편이라고 보면 된다.

Axios 특징

• 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용
• Promise(ES6) API 사용
• 요청 및 응답 인터셉트
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경
• XSRF를 막기위한 클라이언트 사이드 지원

axios vs fetch

Axios 사용법

Axios 설치하기

// npm
npm install axios

// bower
bower install axios

// yarn
yarn add axios

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

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

Axios 문법

axios({
  url: 'http://localhost:3000', // 통신할 웹문서
  method: 'get', // 통신 방식
  data: { // 보낼 데이터
    foo: 'hi'
  }
})

axios 요청 파라미터

주로 많이 쓰이는 것은 이름에 표시되있음

• method : 요청방식. (get이 디폴트)
• url : 서버 주소
• baseURL : url을 상대경로로 쓸대 url 맨 앞에 붙는 주소.
  • 예를들어, url이 /post 이고 baseURL이 https://some-domain.com/api/ 이면 https://some-domain.com/api/post로 요청 가게 된다.
• headers : 요청 헤더
• data : 요청 방식이 'PUT', 'POST', 'PATCH' 해당하는 경우 body에 보내는 데이터
• params : URL 파라미터
• timeout : 요청 timeout이 발동 되기 전 milliseconds의 시간을 요청. timeout 보다 요청이 길어진다면, 요청은 취소되게 된다.
• responseType : 서버가 응답해주는 데이터의 타입 (arraybuffer, documetn, json, text, stream, blob)
• responseEncoding : 디코딩 응답에 사용하기 위한 인코딩 (utf-8)
• transformRequest : 서버에 전달되기 전에 요청 데이터를 바꿀 수 있다.
  • 요청 방식 'PUT', 'POST', 'PATCH', 'DELETE' 에 해당하는 경우에 이용 가능
  • 배열의 마지막 함수는 string 또는 Buffer, 또는 ArrayBuffer를 반환합
  • header 객체를 수정 가능
• transformResponse : 응답 데이터가 만들어지기 전에 변환 가능
• withCredentials : cross-site access-control 요청을 허용 유무. 이를 true로 하면 cross-origin으로 쿠키값을 전달 할 수 있다.
• auth : HTTP의 기본 인증에 사용. auth를 통해서 HTTP의 기본 인증이 구성이 가능
• maxContentLength: http 응답 내용의 max 사이즈를 지정하도록 하는 옵션
• validateStatus : HTTP응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정하도록 하는 옵션
• maxRedirects : node.js에서 사용되는 리다이렉트 최대치를 지정
• httpAgent / httpsAgent : node.js에서 http나 https를 요청을 할때 사용자 정의 agent를 정의하는 옵션
• proxy : proxy서버의 hostname과 port를 정의하는 옵션
• cancelToken : 요청을 취소하는데 사용되어 지는 취소토큰을 명시

/* 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 응답 스키마

{
  data: {}, // 서버가 제공한 응답(데이터)

  status: 200, // `status`는 서버 응답의 HTTP 상태 코드
  
  statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지

  headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공

  config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)

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

axios 단축 메소드

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

axios GET 사용

• 단순 데이터 요청 시
• 파라미터 데이터를 포함시킬 때 (사용자 번호에 따라서 조회하기)

const axios = require('axios'); // node.js쓸때 모듈 불러오기


// user에게 할당된 id 값과 함께 요청을 합니다.
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공했을 때
    console.log(response);
  })
  .catch(function (error) {
    // 에러가 났을 때
    console.log(error);
  })
  .finally(function () {
    // 항상 실행되는 함수
  });
 

// 위와는 같지만, 옵션을 주고자 할 때는 이렇게 요청을 합니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });  
 
 
// async/await 를 쓰고 싶다면 async 함수/메소드를 만듭니다. 
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

axios POST 사용

• 데이터를 Message Body에 포함시켜서 보냄
• GET 메서드에서 params를 사용한 경우와 비슷하게 수행

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

axios DELETE 사용

• body가 비어있음
• DB에서 저장되있는 내용을 삭제하는 목적으로 사용

axios.delete('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })

• 헤더에 너무 많은 데이터를 담을 수 없을 때는 두 번째 인자에 data 추가 가능

axios.delete('/user?ID=12345',{
    data: {
      post_id: 1,
      comment_id: 13,
      username: "foo"
    }
  })
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })

axios PUT 사용

• DB에 저장되있는 내용을 갱신 및 수정하는 목적으로 사용
• 서버 내부적으로 GET -> POST 과정을 거치기에 POST 메서드와 비슷한 형태

axios.put("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })