Axios

Axios는 node.js와 browser를 위한 Promise 기반의 HTTP client입니다.

서버나 기타 API에 네트워크 요청이 필요할 때, Axios, Fetch 또는 Ajax를 통해 HTTP 통신을 할 수 있습니다.

Axios를 이용해 네트워크 요청을 하면 resolve 또는 reject할 수 있는 promise를 반환받습니다.

Installing

• 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 method

Axios는 get, post, put, delete, patch, head, options 등과 같은 메소드를 지원합니다.

아래 예제에서는 HTTP 통신 확인을 위해 아래 API를 사용합니다.

https://jsonplaceholder.typicode.com/

get 예제

code>

import axios from 'axios';

const urlAPI = 'https://jsonplaceholder.typicode.com/';

axios.get(urlAPI + '/posts?ID=1')
  .then(function(response) { // 통신 성공 핸들링
    console.log(response);
  })
  .catch(function(error) { // 통신 에러 핸들링
    console.log(error);
  })
  .then(function() { // 항상 실행되는 영역
    console.log("finish axios");
  })

result>

{data: Array(100), status: 200, statusText: '', headers: {…}, config: {…}, …}
finish axios

위 예제에서 query string을 params를 통해 전달할 수도 있습니다.

code>

import axios from 'axios';

const urlAPI = 'https://jsonplaceholder.typicode.com/';

axios.get(urlAPI + '/posts', {
    params: {
      ID: 1,
    }
  })
  .then(function(response) { // 통신 성공 핸들링
    console.log(response);
  })
  .catch(function(error) { // 통신 에러 핸들링
    console.log(error);
  })
  .then(function() { // 항상 실행되는 영역
    console.log("finish axios");
  })

체이닝으로 구현한 코드에 async/await의 적용도 가능합니다.

code>

import axios from 'axios';

const urlAPI = 'https://jsonplaceholder.typicode.com';

const getPosts = async() => {
  try {
    const response = await axios.get(urlAPI + '/posts?ID=1');
    console.log(response);
  } catch(error) {
    console.log(error);
  }
};
getPosts();

POST 예제

Axios를 통해 POST요청을 할 땐 객체 형태로 data 전달이 가능합니다.

code>

import axios from 'axios';

const urlAPI = 'https://jsonplaceholder.typicode.com';
const dataBody = {
	title: 'POST',
  body: 'sample',
  userId: 1,
}
const postPosts = async() => {
  try {
    const response = await axios.post(urlAPI + '/posts', dataBody);
    console.log(response);
  } catch(error) {
    console.log(error);
  }
};
postPosts();

result>

{data: {…}, status: 201, statusText: '', headers: {…}, config: {…}, …}

Axios API

axios API에 config를 전달해 HTTP 요청이 가능합니다.

config는 객체 형태로 url 만 필수입니다.

{
  // 필수 값
	url: '/posts',

  // url이 절대경로가 아니면 url 앞에 붙는 값
  baseURL: 'https://jsonplaceholder.typicode.com',

  // HTTP method, default value: get
  method: 'get',

  // 요청 데이터를 서버로 전송 전 변경
  trasnformRequest: [function(data, headers) {
    // 데이터 변환 작업
    return data;
  }],

  // 응답 데이터가 then/catch로 전달 전 변경
  transformResponse: [function(data) {
    // 데이터 변환 작업
    return data;
  }],

  // 사용자 지정 헤더
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // 요청과 함께 전송되는 URL 파라미터
  // null이나 undefined는 URL에 렌더링 되지 않음
  params: {
    ID: 1
  },

  // params 배열 시리얼라이즈
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  }, 

  // Request body로 전송될 데이터
  // PUT, POST, PATCH, DELETE 메소드에서만 적용 가능
  data: {
    key: 'value',
  },

  // Request body로 전송될 데이터의 대안 문법
  // POST 메소드에서 적용 가능
  // 키는 제외하고 값만 전달
  data: 'Country=Korea&City=Seoul',

  // 요청이 timout 지정값[ms]보다 오래 걸리면 요청 중단
  // default value: 0
  timeout: 0,

  // 자격 증명을 사용하여 사이트 간 액세스 제어 요청 필요 여부를 나타내는 속성
  // default vlue: false
  withCredentials: false,

  // Authorization 헤더가 설정되고 HTTP Basic 인증이 사용됨
  auth: {
    username: 'hyeonsik',
    password: 'pass1word2',
  },

  // 서버에서 받는 데이터의 타입
  // default value: json
  // option: 'arraybuffer', 'document', 'json', 'text', 'stream', 'blob'(브라우저 전용)
  responseType: 'json',

  // 응답 디코딩에 사용할 인코딩
  // node.js 전용
  responseEncoding: 'utf8',

  // xsrf 토큰 값으로 사용할 쿠키의 이름
  // default value: XSRF-TOKEN
  xsrfCookieName: 'XSRF-TOKEN',

  // `토큰 값을 운반하는 HTTP 헤더의 이름
  // default value: X-XSRF-TOKEN
  xsrfHeaderName: 'X-XSRF-TOKEN',

  // 업로드 진행 이벤트를 처리
  // 브라우저 전용
  onUploadProgress: function (progressEvent) {
    // 업로드 진행 이벤트 작업 수행
  },

  // `다운로드 진행 이벤트를 처리
  // 브라우저 전용
  onDownloadProgress: function (progressEvent) {
    // 다운로드 진행 이벤트 작업 수행
  },

  // node.js에서 허용되는 http 응답 콘텐츠의 최대 크기를 바이트 단위로 정의
  maxContentLength: 2000,

  // 허용되는 http 요청 콘텐츠의 최대 크기를 바이트 단위로 정의
  // Node.js 전용
  maxBodyLength: 2000,

  // 지정된 HTTP 응답 상태 코드에 대한 Promise를 이행할지 또는 거부할지 여부를 정의 
  // 만약 `validateStatus`가 true를 반환하면(또는 'null' 또는 'undefined'으로 설정) Promise resolve
  // 그렇지 않으면, Promise reject
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 기본값
  },

  // node.js에서 리디렉션 최대값을 정의
  // 0으로 설정하면 리디렉션되지 않습니다.
  maxRedirects: 5, // 기본값

  // node.js에서 사용될 UNIX 소켓을 정의
  socketPath: null, // 기본값

  // node.js에서 http 및 https 요청을 수행할 때 사용할 사용자 지정 에이전트를 정의
  // 이렇게 하면 기본적으로 활성화되지 않은 `keepAlive`와 같은 옵션을 추가할 수 있습니다.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 프록시 서버의 호스트이름, 포트, 프로토콜을 정의합니다.
  // 기존의 `http_proxy`와 `https_proxy` 환경 변수를 사용 가능
  // `false`를 사용하면 프록시를 사용하지 않고, 환경 변수를 무시합니다.
  // `auth`는 프록시에 연결하는데 HTTP Basic auth를 사용해야 함을 나타내며 자격 증명을 제공
  // 만약 프록시 서버가 HTTPS를 사용한다면, 프로토콜을 반드시 `https`로 설정해야 합니다.
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // 요청을 취소하는 데 사용할 수 있는 취소 토큰을 지정
  cancelToken: new CancelToken(function (cancel) {
  }),

  // 응답 바디의 자동 압축 해제 여부를 나타냅니다.
  // `true`로 설정하면, 압축 해제된 모든 응답에서 'content-encoding' 헤더도 제거
  // Node.js 전용
  decompress: true // 기본값
}

code>

import axios from 'axios';

const urlAxios = 'https://jsonplaceholder.typicode.com';

const configGet = {
  method: 'get',
  baseURL: urlAxios,
  params: {
    userId: 1,
  }
};

const axiosApiGet = async() => {
  try {
    const response = await axios('/posts', configGet);
    console.log(response);
  } catch(error) {
    console.log(error);
  }
}

axiosApiGet();

result>

{data: Array(10), status: 200, statusText: '', headers: {…}, config: {…}, …}

code>

import axios from 'axios';

const urlAxios = 'https://jsonplaceholder.typicode.com';

const dataPost = {
  title: 'title',
  body: 'body',
  userId: 1,
};

const configPost = {
  method: 'post',
  baseURL: urlAxios,
  data: dataPost,
};

export const axiosApiPost = async() => {
  try {
    const response = await axios('/posts', configPost);
    console.log(response);
  } catch(error) {
    console.log(error);
  }
}

axiosApiPost();

result>

{data: {…}, status: 201, statusText: '', headers: {…}, config: {…}, …}

Axios API는 아래와 같은 메소드들을 지원합니다.

axios(config)
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 인스턴스

create 메소드를 통해 사용자 지정 config가 적용된 axios 인스턴스 생성이 가능합니다.

import axios from 'axios';

const urlAxios = 'https://jsonplaceholder.typicode.com';

const axiosInstance = axios.create({
  baseURL: urlAxios,
  timeout: 1000,
});

위에서 생성한 axios 인스턴스를 통해 사용자 지정 config가 적용된 메소드 호출이 가능합니다.

code>

const configGet = {
  method: 'get',
  params: {
    userId: 1,
  }
};

export const axiosInstanceGet = async() => {
  try {
    const response = await axiosInstance.get('/posts', configGet);
    console.log(response);
  } catch(error) {
    console.log(error);
  }
}

axiosInstanceGet();

result>

{data: Array(10), status: 200, statusText: '', headers: {…}, config: {…}, …}

code>

const dataPost = {
  title: 'title',
  body: 'body',
  userId: 1,
};

const configPost = {
  method: 'post',
  data: dataPost,
};

export const axiosInstancePost = async() => {
  try {
    const response = await axiosInstance('/posts', configPost);
    console.log(response);
  } catch(error) {
    console.log(error);
  }
}

axiosInstancePost();

result>

{data: {…}, status: 201, statusText: '', headers: {…}, config: {…}, …}

응답 스키마

요청에 대한 응답은 아래와 같은 정보를 반환해줍니다.

{
  // 서버가 제공하는 응답
  data: {},

  // HTTP 상태 코드
  status: 200,

  // HTTP 상태 메시지
  statusText: 'OK',

  // HTTP 헤더
  // 모든 헤더 이름은 소문자이며, 괄호 표기법을 사용하여 접근 가능
  // 예시: `response.headers['content-type']`
  headers: {},

  // 요청을 위해 `Axios`가 제공하는 구성
  config: {},

  // 이번 응답으로 생성된 요청
  // node.js에서 마지막 ClientRequest 인스턴스
  // 브라우저에서 XMLHttpRequest
  request: {}
}

Global Config

전역의 axios에 config 기본값 설정이 가능합니다.

import axios from "axios";

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.timeout = 1000;

axios에 config를 적용하는 방법들은 아래와 같습니다.

• 전역 config
• Instance 생성 시 설정되는 config
• axios 요청 내에서 설정되는 config

위 config 중, 아래가 더 높은 우선순위를 갖습니다.

code>

import axios from "axios";

axios.defaults.timeout = 1000;
const instance = axios.create({
	timeout: 2000,
})
instance.get('/url', {
	timeout: 3000,
})

Interceptors

axios의 요청 및 응답이 then 또는 catch 로 전달되기 전 인터셉터를 추가하거나 삭제할 수 있습니다.

// request에 interceptors 추가
const interceptorRequest = axios.interceptors.request.use(function(config) {
  // 요청 전달 전 작업
  return config;
}, function(error) {
	// 요청 오류에 대한 작업
  return Promise.reject(error);
});

// request에 interceptors 제거
axios.interceptors.request.eject(interceptorRequest);

// response에 interceptors 추가
const interceptorResponse = axios.interceptors.response.use(function(response) {
  // 응답 데이터에 대한 작업
  return response;
}, function(error) {
	// 응답 오류에 대한 작업
  return Promise.reject(error);
});

// request에 interceptors 제거
axios.interceptors.response.eject(interceptorResponse);