• 요구사항 : 코드 구조 관련.

API fetch 코드를 async , await 문을 이용하여 수정해주세요. 해당 코드들은 에러가 났을 경우를 대비해서 적절히 처리가 되어있어야 합니다.

필수 API 의 status code 에 따라 에러 메시지를 분리하여 작성해야 합니다.

• 기존 api.js
• 문제점 : 에러 처리가 되지 않음. 500에러 등 생기면 콘솔에 빨갛게 찍히고 있다. 에러가 나면서 다음 동작이 이루어 지지 않는 문제가 생기는 중.
• 요구사항과 같은 형태로 API 수정해보기.
• async ~ await 이용하여 API 호출.
• result.state : status 상태값에 따라 메세지 분리. 200 : 데이터 잘 전달 됨 그 외 : catch(err) 로 메세지를 throw 시킨다.

const API_ENDPOINT =
  "<http://localhost:4001>";

**const request = async(url) => {

  try{
    const result = await fetch(url);
    // console.dir(result.status);  

    if(result.status === 200){
      return result.json();
    }else{
      throw{        //throw는 catch로 보낸다.
        result : result, 
        msg : '요청실패'
      }
    }
  }catch(err){
    console.log(err);
    alert(err.msg);
    return {
      data : null,
    }
  }
}**

const api = {
  fetchCats: keyword => {
    return **request**(`${API_ENDPOINT}/api/cats/search?q=${keyword}`);
  },
  fetchCatsPage: (keyword, page) => {
    return **request**(`${API_ENDPOINT}/api/cats/search?q=${keyword}&page=${page}`);
  },
  fetchRandomCats : () => {
    return **request**(`${API_ENDPOINT}/api/cats/random50`);
  },
  fetchCatDetail: id => {
    return **request**(`${API_ENDPOINT}/api/cats/${id}`);
  },
};

• console.dir(result.status); 찍어보면 결과는 아래와 같이 나오는 것을 확인.

  

• 500 상태 일 때 경우 REQUEST_ERROR 상태 코드마다 msg 정의 하여 전달.

**const REQUEST_ERROR = {
    '500' : { msg : '요청실패' },
}**

const request = async(url) => {

  try{
    const result = await fetch(url);
    // console.dir(result.status);  
    if(result.status === 200){
      return result.json();
    }else{
      **throw REQUEST_ERROR[result.status];   // REQUEST_ERROR.500 일**
    }
  }catch(err){
    console.log(err);
    alert(err.msg);
    return {
      data : null,
    }
  }
}