<항해99 - WEEK5>

이번 WIL의 키워드 : Axios

---

Axios란?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.
그것은 동형입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다.)
서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는
XMLHttpRequests를 사용합니다.

AXIOS 소개 | https://axios-http.com/kr/docs/intro

---

Axios 문법 구성

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

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

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) { // default
    return status >= 200 && status < 300; 
  }, // http 응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'username',
      password: 'passworld',
    }
  }, // proxy 서버의 hostname 과 port 를 정의
  maxRedirects: 5, // node.js 에서 사용되는 리다이렉트 최대치를 지정
  httpsAgent: new https.Agent({ keepAlive: true }),
  // node.js 에서 https 를 요청을 할 때 사용자 정의 agent 를 정의
})
.then(function(response){
  // response Action
})

• 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 요청(request) 파라미터 옵션

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 인스턴스 (리디렉션)

---

Axios 인스턴스

사용자 지정 conifg로 새로운 Axios 인스턴스를 만들 수 있다.

axios.create([config])

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

인스턴스 메소드

다음은 사용 가능한 인스턴스 메소드입니다. 지정된 config가 인스터스 config와 결합됩니다.

axios.request(config)

axios.get(url[,config])

axios.delete(url[,config])

axios.head(url[,config])

axios.options(url[,config])

axios.post(url[,config])

axios.put(url[,config])

axios.patch(url[,config])

axios.getUri(url[,config])

---

참고

Axios Docs
[AXIOS] 📚 axios 설치 & 특징 & 문법 💯 정리