[JS] Axios

1. Axios

Promise 기반 HTTP라이브러리다. 

 

Promise

Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다. 
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

2. 설치

npm, bower, yarn 등 여러 방식이 있다. https://axios-http.com/kr/docs/intro

<!-- 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>

 

3. API

API 유형	처리결과
axios(config)	HTTP 요청에 대한 자세한 속성을 직접 정의해 보낼 수 있다.
axios(url[,config])	url을 따로 뺀 뒤 자세한 속성을 직접 정의할 수 있다.
axios.요청메소드(url,[config])	요청메소드명으로 HTTP요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면 then()에 정의된 로직이 실행되고, 데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 실행된다. 마지막으로 성공과 오류에 상관없이 finally()에 정의한 로직이 실행된다.

예시

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// GET 요청 전송 (기본값)
axios('/user/12345');

 

3. 응답 스키마

.then()을 사용하면 아래 표의 응답을 받을 수 있다.

data	서버가 제공하는 응답
status	HTTP 상태 코드
statusText	HTTP 상태 메시지
headers	HTTP 헤더 모든 헤더 이름은 소문자이며, 괄호 표기법을 사용하여 접근할 수 있다.
config	요청을 위해 `Axios`가 제공하는 구성
request	이번 응답으로 생성된 요청 node.js에서 마지막 ClientRequest 인스턴스 브라우저에서는 XMLHttpRequest

성공했을 때 활용

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

실패했을 때 활용

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 요청이 전송되었고, 서버는 2xx 외의 상태 코드로 응답했습니다.
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 요청이 전송되었지만, 응답이 수신되지 않았습니다. 
      // 'error.request'는 브라우저에서 XMLHtpRequest 인스턴스이고,
      // node.js에서는 http.ClientRequest 인스턴스입니다.
      console.log(error.request);
    } else {
      // 오류가 발생한 요청을 설정하는 동안 문제가 발생했습니다.
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

 

4. 요청 config

공식문서가 한 눈에 보기엔 불편해서 정리했다. 자주사용하는 것에는 밑줄을 쳤다.

config 중 url만 필수다. method는 지정하지 않으면 get으로 요청된다.

url	요청에 사용될 서버 URL
method	요청을 생성할때 사용되는 메소드
baseURL	url이 절대값이 아닌 경우 `baseURL`은 URL 앞에 붙는다. 상대적인 URL을 인스턴스 메서드에 전달하려면 `baseURL`을 설정하는 것이 편리하다.
transformRequest	요청 데이터를 서버로 전송하기 전에 변경할 수 있게 해준다. 'PUT', 'POST', 'PATCH', 'DELETE' 메소드에서만 적용된다. 마지막 함수는 Buffer, ArrayBuffer, FormData 또는 Stream의 인스턴스 또는 문자열을 반환해야 한다.
transformResponse	응답 데이터가 then/catch로 전달되기 전에 변경할 수 있게 한다.
headers	사용자 지정 헤더
params	요청과 함께 전송되는 URL 파라미터 반드시 일반 객체나 URLSearchParams 객체여야 한다. 참고: null이나 undefined는 URL에 렌더링되지 않는다.
paramsSerializer	`params`의 시리얼라이즈를 담당하는 옵션 함수 (예: https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
data	요청 바디로 전송될 데이터 'PUT', 'POST', 'PATCH', 'DELETE' 메소드에서만 적용 가능하다. 객체로 보낼 수도 있고, 쿼리스트링으로 보낼 수도 있다. `transformRequest`가 설정되지 않은 경우 다음 타입 중 하나여야 한다. - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams - 브라우저 전용: FormData, File, Blob - Node 전용: Stream, Buffer
timeout	요청이 시간 초과되기 전의 시간(밀리초)을 지정한다. 요청이 `timeout`보다 오래 걸리면 요청이 중단된다.
withCredentials	자격 증명을 사용하여 사이트 간 액세스 제어 요청을 해야 하는지 여부를 나타낸다.
adapter	커스텀 핸들링 요청을 처리할 수 있어 테스트가 쉬워진다. 유효한 Promise 응답을 반환해야 한다. (lib/adapters/README.md 참고)
auth	HTTP Basic 인증이 사용되며, 자격 증명을 제공 `Authorization` 헤더가 설정되어 `headers`를 사용하여 설정한 기존의 `Authorization` 사용자 지정 헤더를 덮어쓴다. 이 파라미터를 통해 HTTP Basic 인증만 구성할 수 있음을 참고한다. Bearer 토큰 등의 경우 `Authorization` 사용자 지정 헤더를 대신 사용한다.
responseType	서버에서 받는 데이터의 타입 옵션: 'arraybuffer', 'document', 'json', 'text', 'stream' 브라우저 전용: 'blob' 기본값은 'json'이다.
responseEncoding	응답 디코딩에 사용할 인코딩(Node.js 전용) 클라이언트 사이드 요청 또는 `responseType`이 'stream'이면 무시한다.
xsrfCookieName	xsrf 토큰 값으로 사용할 쿠키의 이름
xsrfHeaderName	xsrf 토큰 값을 운반하는 HTTP 헤더의 이름
onUploadProgress	업로드 진행 이벤트를 처리한다.
onDownloadProgress	다운로드 진행 이벤트를 처리한다.
maxContentLength	node.js에서 허용되는 http 응답 콘텐츠의 최대 크기를 바이트 단위로 정의한다.
maxBodyLength	허용되는 http 요청 콘텐츠의 최대 크기를 바이트 단위로 정의한다.
validateStatus	`validateStatus`는 지정된 HTTP 응답 상태 코드에 대한 Promise를 이행할지 또는 거부할지 여부를 정의한다.  만약 `validateStatus`가 true를 반환하면(또는 'null' 또는 'undefined'으로 설정) Promise는 이행된다. 그렇지 않으면, 그 Promise는 거부된다.
maxRedirects	node.js에서 리디렉션 최대값을 정의한다. 0으로 설정하면 리디렉션되지 않는다.
socketPath	node.js에서 사용될 UNIX 소켓을 정의한다.
httpAgent, httpsAgent	각각 node.js에서 http 및 https 요청을 수행할 때 사용할 사용자 지정 에이전트를 정의한다. 이렇게 하면 기본적으로 활성화되지 않은 `keepAlive`와 같은 옵션을 추가할 수 있다.
proxy	`proxy`는 프록시 서버의 호스트이름, 포트, 프로토콜을 정의한다. 기존의 `http_proxy`와 `https_proxy` 환경 변수를 사용하여 프록시를 정의할 수도 있다. 프록시 구성에 환경 변수를 사용하는 경우, 'no_proxy' 환경 변수를 쉼표로 구분된 프록시가 되지 않는 도메인 목록으로 정의할 수도 있다. `false`를 사용하면 프록시를 사용하지 않고, 환경 변수를 무시한다. `auth`는 프록시에 연결하는데 HTTP Basic auth를 사용해야 함을 나타내며, 자격 증명을 제공한다. 그러면 `Proxy-Authorization` 헤더가 설정되고, `headers`를 사용하여 기존의 `Proxy-Authorization` 사용자 지정 해더를 덮어쓴다. 만약 프록시 서버가 HTTPS를 사용한다면, 프로토콜을 반드시 `https`로 설정해야 합니다.
cancelToken	요청을 취소하는 데 사용할 수 있는 취소 토큰을 지정한다.
decompress	응답 바디의 자동 압축 해제 여부를 나타낸다. `true`로 설정하면, 압축 해제된 모든 응답에서 'content-encoding' 헤더도 제거된다. Node.js 전용이다. (XHR은 압축 해제할 수 없다.)

{
  url: '/user',
  method: 'get', // 기본값
  baseURL: 'https://some-domain.com/api',
  transformRequest: [function (data, headers) {
    // 데이터를 변환하려는 작업 수행
    return data;
  }],
  transformResponse: [function (data) {
    // 데이터를 변환하려는 작업 수행
    return data;
  }],
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  params: {
    ID: 12345
  },
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  data: {
    firstName: 'Fred'
  },
  // 바디로 전송하는 데이터의 대안 문법
  // POST 메소드
  // 키가 아닌 값만 전송된다.
  data: 'Country=Brasil&City=Belo Horizonte',
  timeout: 1000, // 기본값은 `0` (타임아웃 없음)
  withCredentials: false, // 기본값
  adapter: function (config) {
    /* ... */
  },
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
  responseType: 'json', // 기본값
  responseEncoding: 'utf8', // 기본값
  xsrfCookieName: 'XSRF-TOKEN', // 기본값
  xsrfHeaderName: 'X-XSRF-TOKEN', // 기본값
  onUploadProgress: function (progressEvent) {
    // 업로드 진행 이벤트 작업 수행
  },
  onDownloadProgress: function (progressEvent) {
    // 다운로드 진행 이벤트 작업 수행
  },
  maxContentLength: 2000,
  maxBodyLength: 2000,
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 기본값
  },
  maxRedirects: 5, // 기본값
  socketPath: null, // 기본값
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
  cancelToken: new CancelToken(function (cancel) {
  }),
  decompress: true // 기본값

}

5. async / await

function 앞 async, axios 앞에 await를 작성하면 정보를 받아올 때까지 기다린다.

async/await 는 ECMAScript 2017 문법이므로 해당 문법은 인터넷 익스플로러와 오래된 브라우저에서 지원되지 않는다.

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

 

 

출처 : https://axios-http.com/kr/docs/intro