🐇 API 요청 구현

데이터를 받아오는 부분이 가장 중요하다 생각하고, 또 추후 컴포넌트 재구성에 사용되는 api요청 부분에 혼선을 주지 않기 위해 먼저 구현합니다.

🥕 요구사항 적용

• fetch를 async await를 활용하여 진행
• 에러가 나는 경우 적절히 처리
• status code에 따라 에러메세지를 분리하여 작성

cats를 기반으로 랜덤한 고양이 사진, 사용자 검색 요청, 고양이 데이터 세가지로 구분되므로, 인자에 구분할 수 있는 type과 데이터인 payload를 받아 활용합니다.

api.js

const API_END_POINT =
  "https://oivhcpn8r9.execute-api.ap-northeast-2.amazonaws.com/dev";

export const request = async (type, payload) => {
  var API_SUB_POINT = "";
	//요청에 따라 url 수정
  switch (type) {
    case "search":
      API_SUB_POINT = `/search?q=${payload}`;
      break;
    case "random":
      API_SUB_POINT = `/random50`;
      break;
    default:
      API_SUB_POINT = `/${payload}`;
  }

	//status 코드에 따른 에러메세지 분리 작성
  const res = await fetch(`${API_END_POINT}${API_SUB_POINT}`);
  switch (res.status / 100) {
    case 3:
      return `Redirects Error with status code ${res.status}`;
    case 4:
      return `Client Error with status code ${res.status}`;
    case 5:
      return `Server Error with status code ${res.status}`;
    default:
      return res.json();
  }
};