axios란?

axios에 대해 알아보자.

• axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다.
  • (Promise API는 나중에 다시 정리할 수 있도록 하자.)
• 더 쉽게 설명하면 프론트랑 백이랑 통신할때 사용하는 라이브러리이다.
• 자바스크립트에는 fetch api가 기본적으로 있지만
  • 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
  • Promise(ES6) API 사용
  • 요청과 응답 데이터의 변형
  • HTTP 요청 취소
  • HTTP 요청과 응답을 JSON 형태로 자동 변경
• 와 같은 이유로 axios를 더 많이 사용한다.
• 나는 지금까지 그냥 다른 레퍼런스 코드들이 axios를 사용해서 따라 똑같이 사용해왔었는데..(아이고..)
• refresh를 구현하며 axios에 대한 이해도 증가했기에 한번 정리해본다.

axios의 기본폼

• 놀라운 사실 한가지가 있다.
• 바로 지금까지 내가 쓰던 axios코드는 사실 단축 메소드라는 사실!

• 그럼 원래의 기본폼은 어떻게 될까?

axios 요청(request) 파라미터 옵션

Tip

붉은색 표기한 파라미터가 주로 많이 쓰이고 나머지는 참고 정도로 보면 된다.

• 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 파라미터 ( ?key=value 로 요청하는 url get방식을 객체로 표현한 것)
• 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) {
		console.log(response.data)
    // response Action
});

• 아~주 많지만 어려울 것 없다.
• 우선 가장 짧은 기본 요소의 폼은

  axios({
    url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  })

  이다.
• 즉, axios 통신을 위해서는 url만 있으면 된다!
  • (method는 안 적으면 get이니까)
• 조금 더 나아가보자
• 사실 이 모든 것은 서버와의 약속이다.
• api가 “약속” 그 자체이니까 ⇒ 내가 이렇게 요청하면 이렇게 데이터를 보내줄게 라는 “약속” 그것만 명심하면 된다.
• 이제 단순하게 생각해서 서버개발자가 api명세에 요청한대로 위의 파라미터 옵션에서 골라서 넣어 보내주면 .then(response)에서 response에 응답데이터가 온다.

axios의 응답(response) 데이터

• axios를 통해 요청을 서버에게 보내면, 서버에서 처리를하고 다시 데이터를 클라이언트에 응답 하게 된다.
• 이를 .then으로 함수인자로(response)로 받아 객체에 담진 데이터가 바로 응답 데이터이다.
• ajax를 통해 서버로부터 받는 응답의 정보는 다음과 같다.

axios({
    method: "get", // 통신 방식
    url: "www.naver.com", // 서버
})
.then(function(response) {
  console.log(response.data)
  console.log(response.status)
  console.log(response.statusText)
  console.log(response.headers)
  console.log(response.config)
})

response.data: {}, // 서버가 제공한 응답(데이터)
 
response.status: 200, // `status`는 서버 응답의 HTTP 상태 코드
 
response.statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지
 
response.headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공
 
response.config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)
 
response.request: {}
// `request`는 응답을 생성한 요청
// 브라우저: XMLHttpRequest 인스턴스
// Node.js: ClientRequest 인스턴스(리디렉션)

• 지금까지는 습관적으로 response.data만 했는데 가끔 response.status가 왜 나오는지 알게 되었다.
• 심지어는 저 response.request! 저거는 진짜 나중에 유용하게 쓰일 것 같다!

axios 단축 메소드

• 사실 나에게는 오히려 위의 기본폼이 어색하다..
• 그 이유는 처음부터 단축 메소드를 사용해왔기 때문이다.
  • 마치 걸음마 때기전에 날기부터 해서 다리 접는 법을 모르는 새와 같은 상태가 많았다.
  • 백엔드입장에서는 놀라 자빠질듯..
• 단축 메소드에는 대표적으로 아래 4가지가 있다. (다들 아는 그것)
  • GET : axios.get(url[, config])
  • POST : axios.post(url, data[, config])
  • PUT : axios.put(url, data[, config])
  • DELETE : axios.delete(url[, config])
• 이걸 뜯어보면 우선 4가지 다 url은 필수 값이라는 말이고
• get을 제외한 3가지는 두번째 인자로 들어오는 값이 data라는 말이다.
• 그리고 그 다음으로 값이 들어온다면 그건 config이며 위에서 봤던 파라미터 옵션을 그대로 넣어주면 된다.
• 즉 기본적으로 post를 쓴다고 가정하면

axios.post("url", {
		firstName: 'Fred',
		lastName: 'Flintstone'
    },{
			headers: {
				'X-Requested-With': 'XMLHttpRequest',
				'user-agent': 'axios/0.21.1',
				authorization: `Bearer ${token}`,
				}
			timeout: 5000,
			}
		)
    .then(function (response) {
        // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

• 이런식으로 보내줄 수가 있는것이다.

출처

https://inpa.tistory.com/entry/AXIOS-📚-설치-사용