[TIL] 001. fetch 함수 재활용

2023. 01. 08 (일)
업데이트 - 2023. 02. 04 (토)

백엔드와 통신하는 fetch 함수를 재사용이 가능한 형태로 구현하였다.

// fetch 함수
export const fetchApi = async (url, method = 'GET', fetchData, auth = false) => {
  try {
    if (method === 'GET') {
      const res = await fetch(url, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json;charset=utf-8',
          Authorization: auth ? localStorage.getItem('accessToken') : null,
        },
      });
      return res.json();
    }
    const res = await fetch(url, {
      method,
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        Authorization: auth ? localStorage.getItem('accessToken') : null,
      },
      body: JSON.stringify(fetchData),
    });
    return res.json();
  } catch (e) {
    return e;
  }
};


// 사용할 때
const data = await fetchData(GET_USER_INFO_API, 'POST', userData);

함수의 결과값으로 response를 return하여
사용하는 곳에서 변수로 저장한 뒤 다음 로직을 상황에 따라 다르게 작성해준다.