개인 공부를 위해 작성했습니다
위코드 다닐 때 들어보긴 했지만 아직 안 써본..
앞으로 많이 사용하게 될 axios에 대해 공부한 내용 정리해본다.
Axios란?
axios란, 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
백엔드와 프론트엔드랑 통신을 쉽게 하기 위해 사용되는 라이브러리
axios 특징
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
- Promise(ES6) API 사용
- 요청과 응답 데이터의 변형
- HTTP 요청 취소
- HTTP 요청과 응답을 JSON 형태로 자동 변경
HTTP(HyperText Transfer Protocol)란?
HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜. 통신 규약.
axios 사용법
axios의 Request method는
- GET : axios.get(url[, config])
- POST : axios.post(url, data[, config])
- PUT : axios.put(url, data[, config])
- DELETE : axios.delete(url[, config])
axios에서 Request Method를 사용하기 위해서는 axios에 .을 붙히며 소문자로 Req Method를 넣어주면 된다.
그리고 해당 메서드의 파라미터에는 API의 주소를 넣는다.
:: axios의 기본적인 사용법
일반적으로 axios의 4가지 기본 메서드를 사용하기 위해 지정해야할 것들이 있다.
4가지 기본 Params
- Method
- Url
- Data (optional)
- Params (optional)
이 4가지 방법을 axios에 알려줘야 한다.
axios({
method: "get",
url: "url",
responseType: "type"
}).then(function (response) {
// response Action
});만약 POST 메서드에서 data를 전송하기 위해서는 url 밑에 data Object를 추가하면 된다.
:: axios의 단축 사용법
4가지 기본 파라미터를 생략하거나 간결하게 사용할 수 있다
axios.get()
axios.get()을 사용하는 2가지 상황이 있는데
2가지 상황에 따라 params: {} 객체가 존재할지 안할지가 결정된다.
- 단순 데이터(페이지 요청, 지정된 요청) 요청을 수행할 경우
// callback 을 사용할 때,
axios.get("url")
.then(response => {
// response
}).catch(error => {
// 오류발생시 실행
}).then(() => {
// 항상 실행
});
// async await 함수를 사용할 때,
try {
const data = await axios.get("url");
} catch {
// 오류 발생시 실행
}- 파라미터 데이터를 포함시키는 경우 (사용자 번호에 따른 조회)
axios.get("url", {
params: {
id: 123
}
})
.then(response => {
// response
}).catch(error => {
// 오류발생시 실행
}).then(() => {
// 항상 실행
});
// async await 함수를 사용할 때,
try {
const data = await axios.get("url",
params: {
id: 123
}
);
} catch {
// 오류 발생시 실행
}axios.post()
post 메서드에는 일반적으로 데이터를 Message Body에 포함시켜 보낸다.
get 메서드에서 params를 사용한 경우와 비슷하게 수행된다.
axios.post("url", {
username: "",
password: ""
})
.then(response => {
// response
}).catch(error => {
// 오류발생시 실행
}).then(() => {
// 항상 실행
});
// async await 함수를 사용할 때,
try {
const data = await axios.post("url");
} catch {
// 오류 발생시 실행
}axios.put()
put 메서드는 서버 내부적으로 get ➔ post 과정을 거치기 때문에 post 메서드와 비슷한 형태이다.
axios.put("url", {
username: "",
password: ""
})
.then(response => {
// response
}).catch(error => {
// 오류발생시 실행
}).then(() => {
// 항상 실행
});
// async await 함수를 사용할 때,
try {
const data = await axios.put("url", {
username: "",
password: ""
});
} catch {
// 오류 발생시 실행
}axios.delete()
delete 메서드에는 일반적으로 body가 비어있다.
그래서 형태는 get과 비슷한 형태를 띄지만 한 번 delete 메서드가 서버에 들어가게 된다면 서버 내에서 삭제 process를 진행하게 된다.
axios.delete('/user?ID=12345')
.then(response => {
// handle success
console.log(response);
})
.catch(error => {
// handle error
console.log(error);
})
.then(() => {
// always executed
});
// async await 함수를 사용할 때,
try {
const data = await axios.delete("url");
} catch {
// 오류 발생시 실행
}많은 데이터를 요청할 경우
하지만 query나 params가 많아져서 헤더에 많은 정보를 담을 수 없을 때는 두 번째 인자에 data를 추가해줄 수 있다.
axios.delete('/user?ID=12345',{
data: {
post_id: 1,
comment_id: 5,
username: "april"
}
})
.then(response => {
// handle success
console.log(response);
})
.catch(error => {
// handle error
console.log(error);
})
.then(() => {
// always executed
});
// async await 함수를 사용할 때,
try {
const data = await axios.delete("url");
} catch {
// 오류 발생시 실행
}:: React에서 axios 사용
보통 프로젝트에서는
API의 스펙,서버의 주소,credentials 설정을 담당하는API.js라는 파일을 만들고axios의기본 설정에 대해서 지정해주고- 각각의 서비스에서 가져가 사용하는 형태로 구현.
axios 의 인스턴스 생성/async await 통신
먼저 axios 의 인스턴스를 생성해서 API라는 변수에 담고 API를 반환시킨다.
// API.js
// axios 의 인스턴스를 생성
import axios from 'axios';
const API = axios.create({
BASE_URL: '',
headers: {
'Content-Type': 'application/json',
},
withCredentials: true,
});
export default API;각각 파일에서는 async await 으로 콜백을 처리하여 통신한다.
import API from '../utils/API';
export const login = async (code) => {
const { data } = await API.post('url',
JSON.stringify(code)
);
return data;
}Error Handling을 위한 try-catch문 사용
import API from '../utils/API';
export const refresh = async () => {
try {
const { data } = await API.get('url');
return data;
} catch {
// Error Handling
}
};