[React] Axios란? 서버통신하기/ headers, body 넣기

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로 잡아낼 수 있다.