Axios 사용법 정리

💡 Axios ?

브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리로
Ajax, fetch와 같은 웹 통신 기능을 제공

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Ajax, fetch와 같은 웹 통신 기능을 제공
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

Axios - 한글 문서
Axios - 러닝가이드

⭐️ 설치

npm 사용하기:

$ npm install axios

bower 사용하기:

$ bower install axios

yarn 사용하기:

$ yarn add axios

🧚 사용법

👀 get

axios.get(url[, config])            // GET

📃 getApi.js

// 기본 케이스 (ex - /user/:user-id)
const getData = ({ userId = 0 }) => {
  const requestUrl = `http://baseUrl.com/data/${userId}`
  return axios.get(requestUrl);
};

// Query parameter를 넘겨야 하는 경우 (/...?param1=''&param2='')
const getDataWithParam = ({ param1 = '', param2 = '' }) => {
  const params = { param1, param2 };
  const requestUrl = 'http://baseUrl.com/data';
  return axios.get(requestUrl, { params });
};

// cookie에 token 값을 추가시켜야 하는경우
const getLoginData = () => {
  const requestUrl =  'http://baseUrl.com/login-data';
  return axios.get(requestUrl, { withCredentials: true });
};

// cookie에 token 값을 추가시켜야 하는경우 + param을 넘겨야 하는 경우
const getPersonalData = ({ userId = 0 }) => {
  const params = { itvPgmCd, eventSeq };
  const requestUrl = 'http://baseUrl.com/personal-data';
  return axios.get(requestUrl, { withCredentials: true, params });
};

export default {
  getData,
  getDataWithParam,
  getLoginData,
  getPersonalData,
};

📂 post

axios.post(url[, data[, config]])   // POST

📃 postApi.js

// Query parameter를 넘겨야 하는 경우 (/...?param1=''&param2='')
const saveWithParam = ({ param1 = '', param2 = '' }) => {
  const params = { param1, param2 };
  const requestUrl = 'http://baseUrl.com/data';
  return axios.post(requestUrl, {}, { params });
};

// cookie에 token 값을 추가시켜야 하는경우 + param을 넘겨야 하는 경우
const saveUserInfo = ({ param1 = '', param2 = '' }) => {
  const params = { param1, param2 };
  const requestUrl = 'http://baseUrl.com/user';
  return axios.post(requestUrl, {}, { withCredentials: true, params });
};

// cookie에 token 값을 추가시켜야 하는경우 + form Data (request payload) 를 전송하는 경우
const saveProfileMsg = ({ textValue = '', category = '' }) => {
  const payload = { textValue, category };
  const requestUrl = 'http://baseUrl.com/profile';
  return axios.post(requestUrl, {}, { withCredentials: true, data: { profileForm: payload } });
};

export default {
  saveWithParam,
  saveUserInfo,
  saveProfileMsg,
};

💫 put

axios.put(url[, data[, config]])    // PUT

📃 putApi.js

const updateData = ({ username = "", password = ""}) {
  const payload = { username, password };
  const requestUrl = 'http://baseUrl.com/user';
  return axios.put(requestUrl, payload);
}

export default {
  updateData,
};

🌪 delete

axios.delete(url[, config])         // DELETE

📃 deleteApi.js

const deleteData = ({ memoId = 0 }) {
  const payload = { username, password };
  const requestUrl = `http://baseUrl.com/memo/${memoId}`;
  return axios.delete(requestUrl);
}

export default {
  deleteData,
};