1. Axios란?
- 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
2. 설치
yarn add axios
import axios from "axios";
3. 사용방법
1. 리액트 프로젝트에 shared 폴더에 Request.js 파일을 만든다.
import axios from "axios";
const instance = axios.create({
baseURL: "서버주소" // 요청을 www.aa.com/user로 보낸다면, www.aa.com까지 기록
});
// 가지고 있는 토큰 넣어주기!
// 로그인 전이면 토큰이 없으니 못 넣어요.
// 그럴 땐 로그인 하고 토큰을 받아왔을 때 넣어줍시다.
// instance.defaults.headers.common["Authorization"] = USER_TOKEN;
export default instance;
2. 리덕스 모듈에서 불러온다.
import instance from "../../shared/Request";
3. GET메소드
const getProductSV = ()=>{
return function(dispatch) {
instance.get('/main')
.then(res=>{
dispatch(getProducts(res.data));
})
.catch(err=> console.log(err));
}
}
서버와 설계한 api대로 get요청을 보낼 url을 적어준다.
4. Post메소드
const addCartSV = (product) =>{
return function(dispatch, getState, {history}){
instance.post('/mypage',{
productId : product.productId,
purchase : product.purchase
})
.then((res) =>{
dispatch(addCart({...product,
productImg : res.data.productId,
productName : res.data.productName,
price : res.data.price}))
})
.catch(err=> console.log("장바구니 추가 실패", err));
}
}
post요청을 보낼때 두번째 파라미터로 바디에 보낼 값들을 보낸다.
5. headers보내기
//회원가입
const signupAPI = (userName, password, nickname, phoneNumber, address, confirmPassword) => {
return function (dispatch, getState, { history }) {
instance.post('/user/regist',{
userName: userName,
password: password,
nickname: nickname,
phoneNumber: phoneNumber,
address: address,
confirmPassword:confirmPassword},
{
headers: {
"Content-Type": "application/json",
}
})
.then((res)=>{
window.alert("회원가입에 성공했습니다!")
history.push('/pages/login');
})
.catch((err)=> window.alert(err))
};
};
header를 같이 보내야한다면 세번째 파라미터로 보낸다.
4. Fetch api와 코드비교
const signupAPI = (userName, password, nickname, email, phonenumber, address, confirmPassword) => {
return function (dispatch, getState, { history }) {
const API = "http://3.35.219.219/user/regist";
fetch(API, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
userName: userName,
password: password,
nickname: nickname,
email: email,
phonenumber: phonenumber,
address: address,
confirmPassword:confirmPassword
}),
})
.then((response) => response.json())
.then((result) => {
//중복체크 후 다시 중복 아이디, 이메일로 바꿨을 경우
//대비 서버에서 한번 더 체크.
let dupMsg = result.message;
if (dupMsg === "emailfalse") {
window.alert("이메일 중복확인을 해주세요.");
} else if (dupMsg === "usernamefalse") {
window.alert("아이디 중복확인을 해주세요.");
} else {
window.alert("회원가입이 되었습니다!");
history.push("/pages/login");
}
});
};
};
const signupAPI = (userName, password, nickname, phoneNumber, address, confirmPassword) => {
return function (dispatch, getState, { history }) {
instance.post('/user/regist',{
userName: userName,
password: password,
nickname: nickname,
phoneNumber: phoneNumber,
address: address,
confirmPassword:confirmPassword},
{
headers: {
"Content-Type": "application/json",
}
})
.then((res)=>{
window.alert("회원가입에 성공했습니다!")
history.push('/pages/login');
})
.catch((err)=> window.alert(err))
};
};
5. Axios장점
- IE까지 대부분의 브라우저를 지원한다. (구형 포함)
- JSON 데이터를 자동 변환해준다.
- Node.js에서도 사용 가능하다.
- 요청을 중도 Cancel, 응답시간 초과 설정 등의 기능이 있다.
- 400, 500대의 Error 발생시에 reject 로 response를 전달해 catch로 잡아낼 수 있다.
728x90
'WEB > REACT' 카테고리의 다른 글
[React] 배열에서 원소 삭제하기 filter (0) | 2021.07.21 |
---|---|
[React] 배열 렌더링하기, map 사용 , key값이 꼭 있어야하는 이유 (0) | 2021.07.21 |
[React] react-daum-postcode로 주소 api사용하기 (0) | 2021.07.21 |
[REACT] 마켓컬리 클론코딩 - 검색 기능 구현하기 (2) | 2021.07.20 |
[React] 자식의 데이터를 부모에게 넘겨주기 useState (0) | 2021.07.19 |