Axios 사용법 정리
17156 단어 JavaScriptExamplelibraryExample
💡 Axios ?
브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리로
Ajax, fetch와 같은 웹 통신 기능을 제공
- 브라우저를 위해 XMLHttpRequests 생성
- node.js를 위해 http 요청 생성
- Ajax, fetch와 같은 웹 통신 기능을 제공
- Promise API를 지원
- 요청 및 응답 인터셉트
- 요청 및 응답 데이터 변환
- 요청 취소
- JSON 데이터 자동 변환
- XSRF를 막기위한 클라이언트 사이드 지원
⭐️ 설치
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=''¶m2='')
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=''¶m2='')
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,
};
Author And Source
이 문제에 관하여(Axios 사용법 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tjdud0123/Axios-사용법-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)