[axios] fetch 대신 axios 사용하기, 내가 경험한 트러블슈팅

 

axois란?

fetch와는 다르게 모든 브라우저를 지원하여 크로스 브라우징를 이슈 해소할 수 있고
json형태로 자동변경해주는 웹 통신 기능을 제공하는 라이브러리이다.

또한 fetch에는 존재하지 않는 요청 취소 기능, 타임아웃 설정 기능 등이 있다.

Axios 문법 구성

• GET : axios.get(url[, config])
• POST : axios.post(url, data[, config])
• PUT : axios.put(url, data[, config])
• DELETE : axios.delete(url[, config])

- axios 요청(request) 파라미터 옵션

• method : 요청방식 (get이 디폴트)

• url : 서버 주소

• headers : 요청 헤더

• data : 요청 방식이 'PUT', 'POST', 'PATCH' 해당하는 경우 body에 보내는 데이터

• params : URL 파라미터 ( ?key=value 로 요청하는 url get방식을 객체로 표현한 것)

• responseType : 서버가 응답해주는 데이터의 타입 지정 (arraybuffer, documetn, json, text, stream, blob)

• withCredentials : cross-site access-control 요청을 허용 유무. 이를 true로 하면 cross-origin으로 쿠키값을 전달 할 수 있다.

 

여기서 주의할 점은 

params는 URL 파라미터로 key=value 로 요청하는 url get방식을 객체로 표현한 것이다.
즉, param는 'GET' 요청 때 쓰인다.

data는 요청 방식이 'PUT', 'POST', 'PATCH' 해당하는 경우 body에 보내는 데이터이다.

예시 1. axios GET

get 메서드에는 2가지 상황이 크게 존재한다.

1. 단순 데이터(페이지 요청, 지정된 요청) 요청을 수행할 경우
2. 파라미터 데이터를 포함시키는 경우

단순 데이터를 요청할 때는 api url만 잘 써주면 되고

파라미터 데이터를 포함시키는 경우에는 param에 담아 보내주면 된다.

 

- 기본적인 방법

axios.get('/user', {
    params: {
      id: 12345 ///user?id=12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

 

- 내가 사용한 방법 : prams 변수로 설정하기

const params = {
    status: 'string',
    target: 'string',
    search: 'string',
  };

const ClickSearchBtn = async () => {
    const { data } = await axios.get(
      `${process.env.REACT_APP_URL}/api/v1/admin/searches`,
      { params }
    );
    setAccountTable(data);
  };

예시 2. axios POST

post 메서드에는 일반적으로 데이터를 Message Body에 포함시켜 보낸다.

위에서 봤던 get 메서드에서 params를 사용한 경우와 비슷하게 수행된다.

axios.post("url", {
		firstName: 'Fred',
		lastName: 'Flintstone'
    })
    .then(function (response) {
        // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

 const ClickCheckBtn = async () => {
    try {
      await axios
        .post(
          `api/admin/accounts`,
          {
            adminAccount: inputValue.idValue,
          },
          { headers }
        )
        .then(res => alert(res.data));
    } catch (error) {
      alert('이미 사용중인 아이디입니다.');
    }
  };

axios를 쓰며 경험한 트러블슈팅

1. axios에 header 넣기

post 요청을 하고있을 때의 일이다.

api를 요청할 때 cors오류 때문에 항상 header도 같이 보내고 있었다.
어느날은 분명 header도 같이 보내는데 자꾸 cors오류가 났다.
그래서 network탭을 보는데 header가 담겨있지 않았다. 나는 분명 header도 같이 보내고 있었는데 말이다..

알고보니 내가 잘못담아서 보내고 있었다...

 

axios.post에서 header 넣는 방법과

axios.get에서 header 넣는 방법에는

차이가 있었다.

 

(header는 변수로 관리중)

const headers = {
  Authorization: `Bearer ${localStorage.getItem('login-token')}`,
};

(axios.post)

// axios.post 수정전
const ClickCheckBtn = async () => {
    try {
      await axios
        .post(
          `api/admin/accounts`,
          {
            headers,
            adminAccount: inputValue.idValue,
          },
        )
        .then(res => alert(res.data));
    } catch (error) {
      alert('이미 사용중인 아이디입니다.');
    }
  };
  
  // axios.post 수정후
    const ClickCheckBtn = async () => {
    try {
      await axios
        .post(
          `api/admin/accounts`,
          {
            adminAccount: inputValue.idValue,
          },
          { headers }
        )
        .then(res => alert(res.data));
    } catch (error) {
      alert('이미 사용중인 아이디입니다.');
    }
  };

(axios.get)

 const ClickSearchBtn = async () => {
    const { data } = await axios.get(
      `api/admin/appVersion`,
      { params, headers }
    );
    setVersionTable(data);
  };

2. axios에 분명 params를 넣어주고 있는데 왜 안담겨있지?

get요청을 할 때이다.
여느때와 똑같이 params를 변수로 설정하여 보내고 있었는데
자꾸 오류가 나길래 network탭을 확인해보니 params가 담겨있지 않았다.

(버그가 났던 상황의 코드)

  const badgeParams = {
    status: GetStatus(menu),
    type: badgeToUpperEn(badge),
    start: Moment(start[menu]).format('YYYY-MM-DD'),
    end: Moment(end[menu]).format('YYYY-MM-DD'),
    target: target[menu],
    search: search[menu],
  };
  
    const ClickSearchBtn = async () => {
    const { data } = await axios.get(
      `api/admin/badge`,
      { badgeParams, header }
    );
    setVersionTable(data);
  };

원인은 무엇이었을까?

바로.... params에 담아 보내야했었다.

 

(버그 수정후)

  const badgeParams = {
    status: GetStatus(menu),
    type: badgeToUpperEn(badge),
    start: Moment(start[menu]).format('YYYY-MM-DD'),
    end: Moment(end[menu]).format('YYYY-MM-DD'),
    target: target[menu],
    search: search[menu],
  };
  
    const ClickSearchBtn = async () => {
    const { data } = await axios.get(
      `api/admin/badge`,
      { params: badgeParams,
        header }
    );
    setVersionTable(data);
  };

그 전에는 params라는 변수명을 사용했기에 괜찮았던 것이다.

network탭에 파라미터가 담겨있지 않아 도대체 왜 안담겼나... back에 파라미터를 닫아놓는 기능도 있나...???하고 당황했었는데

온전히 나의 잘못이었다...!!!

 

이렇게 주니어개발자 노정은은 조금씩 성장하고 있다...

앞으로도 오류를 잘 해결해나가는 개발자가 되길!! : )