axios

axios vs fetch
axios fetch
써드파티 라이브러리로 설치가 필요/ 현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호를 해준다./ 별도 보호 없음
data 속성을 사용/ body 속성을 사용
data는 object를 포함한다/ body는 문자열화 되어있다
status가 200이고 statusText가 ‘OK’이면 성공이다/ 응답객체가 ok 속성을 포함하면 성공이다
자동으로 JSON데이터 형식으로 변환된다/ .json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다./ 해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음/ 기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함/ 지원하지 않음
좀더 많은 브라우저에 지원됨/ Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

작동방식
1. instance를 생성한다.

import axios from "axios";

const instance = axios.create({
  baseURL:
    process.env.NODE_ENV === "development"
      ? "http://127.0.0.1:8000/api/v1/"
      : "https://foo.xyz/api/v1/",
  withCredentials: true,
});

2. 인자가 없는경우 :

export const bars = () =>
  instance.get("bars/").then((response) => response.data);

3. 인자가 있는 경우(리액트) :

export const bar = ({ queryKey }: QueryFunctionContext) => {
  const [_, barPk] = queryKey;
  return instance.get(`bars/${barPk}`).then((response) => response.data);
};

4. instance 안쓰고 POST 요청 :

export const uploadImage = ({ file, uploadURL }) => {
  const form = new FormData();
  form.append("file", file[0]);
  return axios
    .post(uploadURL, form, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((response) => response.data);
};

5. instance를 이용하여 POST 요청:

export const getUploadURL = () =>
  instance
    .post(`medias/photos/get-url`, null, {
      headers: {
        "X-CSRFToken": Cookie.get("csrftoken") || "",
      },
    })
    .then((response) => response.data);