Using Axios

Axios 인스턴스

• YU-RentCar web 을 제작하면서 사용하게 될 axios API 인스턴스
• 3가지의 기본적인 configuration 들을 포함한 채로 생성

// interceptors.js
const api = axios.create({
  baseURL: "request base URL", // 기본 주소
  headers: { // 헤더 정보
    "Content-Type": "application/json",
  },
  withCredentials: true, // 쿠키 전달을 위함
});

---

Interceptors

요청을 보내는 순간과 응답을 받는 순간을 제어

1. request interceptor

• 요청을 보내기 직전 해당 요청에 대한 제어가 이루어진다
• 요청에 문제가 없는 경우 사전에 정의한 axios 인스턴스의 config 정보 설정 가능
• 요청에 문제가 있는 경우 문제가 있음을 출력 후 reject

// interceptors.js
/* request interceptor */
api.interceptors.request.use(
  /* request 보내기 전 axios (추가) 설정 가능 */
  (config) => {
    return config;
  },
  /* request 오류 발생 */
  (error) => {
    console.log(`fail for request`);
    return Promise.reject(error);
  }
);

2. response interceptor

• 응답을 받기 직전 해당 응답에 대한 제어가 이루어진다
• 응답에 문제가 없는 경우 응답 수신에 성공했음을 출력
• 응답에 문제가 있는 경우 응답 수신에 실패했음을 출력 후 reject

// interceptors.js
/* response interceptor */
api.interceptors.response.use(
  /* response 수신 성공 */
  (response) => {
    console.log(`success for response`);
    return response;
  },
  /* response 수신 실패 */
  (error) => {
    console.log(`fail for response`);
    return Promise.reject(error);
  }
);

---

Axios API 작성법

• axios 인스턴스도 생성하고 요청과 응답에 대한 interceptor 까지 정의하였으니 실제 요청을 보내고 응답을 받을 메소드를 생성
• src/api/ 에 각 페이지 별로 필요한 메소드들을 모아둔 파일로 생성됨

let getUserInfo = () => {
  return api({
  /* config */
    url: "/users/profiles",
    method: "get",
  });
};

해당 메소드는 위에서 생성한 axios 인스턴스인 api 를 이용한다. 이때, 필요한 config 들을 추가해주면 된다.

url : 인스턴스에서 정의한 baseURL 뒤에 추가로 붙게될 path ("/" 로 시작해야함을 주의하자.)

method : 요청을 보낼 메소드 선택 (get, patch, post, delete, put)

params : GET 요청 시 사용하게 될 값

data : POST, DELETE, PUT, PATCH 요청 시 사용하게 될 값

---

실제 적용

• 요청을 보낼 메소드까지 제작했으니 실제 적용하여 응답을 처리해야함

async () => {
      await getUserInfo()
        .then((response) => {
          dispatch(changeUserInfo(response.data));
        })
        .catch((error) => {
          console.log(error.response);
        });
    }

응답 수신이 성공적으로 수행되었다면 then 을 통해 진행이 되며 실패했다면 catch 를 통해 진행된다.