[TIL] 240222(목) 비동기 통신 : axios의 CRUD

📌 Axios란?

: node.js와 브라우저를 위한 Promise 기반 http 클라이언트

쉽게 말해, http를 사용하여 서버와 통신하기 위해 사용하는 패키지이다.

Axios 설치하기

yarn add axios

Json-server 설정하기

db.json 파일을 만들고, 기본 데이터를 설정한다.

yarn json-server db.json --port 4001

▶️ 기존 서버가 아닌 db를 확인 할 수 있는 새로운 포트를 열겠다.

4000 포트를 여는 명령어가 너무 길기 때문에, package.json 파일에서 "serve" 라는 새로운 명령어를 지정해준다.

"scripts": {
    "serve": "json-server db.json --port 4001"
  }

yarn serve

▶️ 4000 포트를 열어줘!

📌 Axios를 통해 GET, POST, DELETE, PATCH 요청하기

fan-letter project axios 설정하기

1. GET 요청 (READ)

axios.get(url[, config])

GET 요청을 하는 방법

1. path variable로 URL 작성
   ex) GET /posts
2. query 사용
   ex) GET /posts?id=1

  const [letters, setLetters] = useState(null);

  // db.json 데이터 불러오기 (GET)
  const fetchLetters = async () => {
    const { data } = await axios.get(`http://localhost:4001/letters`);
    console.log("data", data);
    setLetters(data);
  };

  useEffect(() => {
    fetchLetters();
  }, []);

 

2. POST 요청 (CREATE)

axios.post(url[,data[, config]])

서버에 데이터를 추가할 때 사용한다.

const submitHandler = async (event) => {
    event.preventDefault();

   {* 이전 코드 생략 *}

    // input에 들어있는 값(state)을 DB에 저장
    const newLetter = {
      createdAt: date,
      nickname,
      avatar:
        "https://www.iprcenter.gov/image-repository/blank-profile-picture.png/@@images/image.png",
      content,
      writedTo: selectedMember,
      id: uuidv4(),
      isUpdate: false,
    };

    // POST 요청하기
    axios.post(`http://localhost:4001/letters`, newLetter);
    setLetters([...letters, newLetter]);
    event.target.reset();
  };

 

3. DELETE 요청 (DELETE)

axios.delete(url[, config])

저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용한다.

// letter 삭제하기 (DELETE)
  const deleteBtnClickHandler = async (id) => {
    axios.delete(`http://localhost:4001/letters/${id}`);
    alert("해당 팬레터가 삭제되었습니다");
    navigate(`/`);
    setLetters(letters.filter((letter) => letter.id !== id));
  };

 

4. PATCH 요청 (UPDATE)

axios.patch(url[, data[, config]])

주로 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용한다.

 // letter 수정하기 (UPDATE)
  const [isUpdateContent, setIsUpdateContent] = useState(content);
  const [isUpdate, setIsUpdate] = useState(false);

  // 수정하기 <-> 수정 완료 버튼 설정
  const updateBtnClickHandler = async () => {
    if (!isUpdate) {
      setIsUpdate(true);
    } else {
      await axios.patch(`http://localhost:4001/letters/${id}`, {
        content: isUpdateContent,
      });
      // updateBtn(id);
      const updatedLetter = await letterApi.get(`/letters/${id}`);
      setLetters(
        letters.map((letter) => {
          if (letter.id === id) {
            return updatedLetter.data;
          } else {
            return letter;
          }
        })
      );
      setIsUpdate(false);
      alert("해당 팬레터가 수정되었습니다");
      navigate(`/`);
    }
  };

각 axios를 새로운 api 파일로 정리하여 하나의 파일에서 axios 요청을 하는 방식으로 refactoring을 진행할 필요가 있어보인다.
Thunk와 연결하여 데이터를 로컬과 서버 사이를 연결해주는 작업도 필요하다.

 

🚨 axios instance 와 interceptor 설정

이를 위해서 우선, api.js 파일을 통해 instance를 생성한다.

axios.create()로 instance를 만들고, 그 안에는 대표적으로 baseURL을 객체 안에 넣어준다.
이때 baseURL은 env 파일을 통해 환경변수로 관리한다.

.env

REACT_APP_SERVER_URL=http://localhost:4001

src > api > api.js

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.REACT_APP_SERVER_URL,
});

instance.interceptors.request.use(
  // 요청을 보내기 전 수행되는 함수
  function (config) {
    console.log("인터셉터 요청 성공");
    return config;
  },

  // 오류 요청을 보내기 전 수행되는 함수
  function (error) {
    console.log("인터셉터 요청 오류");
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  // 응답을 내보내기 전 수행되는 함수
  function (response) {
    console.log("인터셉터 응답 받았습니다!");
    return response;
  },

  // 오류 응답을 내보내기 전 수행되는 함수
  function (error) {
    console.log("인터셉터 응답 오류!");
    return Promise.reject(error);
  }
);
export default instance;

이렇게 instance를 설정하면,

const { data } = await axios.get(`http://localhost:4001/letters`);

대신에

const { data } = await api.get(`/letters`);

로 간단하게 작성할 수 있다.

axios interceptor의 경우, client와 server 사이 데이터를 주고 받는 사이에서 데이터를 가로채서 오류가 나고 있는지 없는지 확인을 할 수 있게 해준다.

interceptor를 통해 오류가 발생한 지점을 확인 할 수 있다는 장점이 있다!

 

출처(https://javascript.plainenglish.io/how-to-implement-a-request-interceptor-like-axios-896a1431304a)