Axios

1. Axios 개요

리액트에서 AJAX를 구현하려면, Javascript의 내장객체인 XMLRequest를 사용하거나, HTTP Client를 사용해야 한다. Axios는 리액트에서 많이 쓰이는 HTTPClient 라이브러리의 하나이다. Axios는 Promise 기반이고, async/await 코드를 쉽게 구현할 수 있게 해준다.

---

2. Axios 특징 

• 오래된 브라우저에서도 지원한다.
• 요청을 중단할 수 있다.
• response timeout을 쉽게 지정할 수 있다.
• CSRF 보호 기능이 내장되어 있다.
• Promise(ES6) API를 사용한다.
• HTTP 요청 취소 혹은 요청과 응답을 JSON 형태로 자동 변경해준다.

---

3. Axios 사용법

3-0. REST API

REST란, 어떤 자원에 대해 CRUD(Create, Read, Update, Delete) 연산을 수행하기 위해 URI로 요청을 보내는 것으로 Get, Post 방식의 method를 사용하여 요청을 보내며, 요청을 위한 자원은 특정한 형태(ex. JSON)로 표현된다. 이러한 REST 기반의 API를 웹으로 구현한것이 REST API이다.

REST API에는 대표적으로 4가지의 HTTP 메서드를 행위의 수단으로 사용한다.

1. GET : 데이터 조회
2. POST : 데이터 등록 및 전송
3. PUT: 데이터 수정
4. DELETE: 데이터 삭제

 

3-1. 리액트 프로젝트에 shared 폴더에 Request.js 파일을 만든다.

import axiosfrom "axios";

const instance = axios.create({
	baseURL: "서버주소" // 요청을 www.aa.com/user로 보낸다면, www.aa.com까지 기록
});

// 가지고 있는 토큰 넣어주기!
// 로그인 전이면 토큰이 없으니 못 넣어요.
// 그럴 땐 로그인 하고 토큰을 받아왔을 때 넣어줍시다.
// instance.defaults.headers.common["Authorization"] = USER_TOKEN;

exportdefault instance;

 

3-2. 리덕스 모듈에서 불러온다.

import instance from "../../shared/Request";

 

3-3. GET 메소드

const getProductSV = ()=>{
returnfunction(dispatch) {
       instance.get('/main')
       .then(res=>{

           dispatch(getProducts(res.data));
       })
       .catch(err=> console.log(err));
   }
}

서버와 설계한 api대로 get요청을 보낼 url을 적어준다.

 

3-4. Post 메소드

const addCartSV = (product) =>{
returnfunction(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요청을 보낼 때 두번째 파라미터로 바디에 보낼 값들을 보낸다.

3-5. headers 보내기

//회원가입
const signupAPI = (userName, password, nickname, phoneNumber, address, confirmPassword) => {
returnfunction (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. Axios 장점

• IE까지 대부분의 브라우저를 지원한다. (구형 포함)
• JSON 데이터를 자동 변환해준다.
• Node.js에서도 사용 가능하다.
• 요청을 중도 Cancel, 응답시간 초과 설정 등의 기능이 있다.
• 400, 500대의 Error 발생시에 reject 로 response를 전달해 catch로 잡아낼 수 있다.