개요

Promise 의 catch 와 try/catch 의 사용 목적을 정확히 파악하지 못한 상태에서 적절히 사용을 하지 못했다.

실수 내용

어떤 함수가 있다.
이 함수는 비동기함수를 호출하는데, 성공했을 땐 내가 원하는 자료구조로 데이터를 파싱하는 것이고, 실패하면(즉, catch 로 빠지면) 빈 배열 [] 을 return 하는 역할을 한다.

❌ 잘못 된 코드

하기 코드는 promise 구문에서 제공하는 catch 메소드를 사용한 예이다.

내가 예상한 결과값은 만약에 body 변수가 에러가 나서 catch 로 빠지게 된다면, 이 비동기호출을 부르면 큰 스코프 단위의 GetBinanceCoinList 함수 자체가 빈배열 [] 로 return이 될 줄 알았다.

하지만, body 변수에 빈배열 [] 이 return 되는 구조였고, 당연히 그 밑으로 body 데이터를 받아서 실행하는 함수들은 빈배열을 받았기 때문에 최소 undefined를 낼 수 밖에 없는 구조였던 것이다.

따라서, 내가 기대했던 GetBinanceCoinList 의 결과값은 빈배열 [] 이 아니라, undefined 였다.

export const GetBinanceCoinList = async () => {
    const body: any = await axios.get('https://api.binance.com/api/v3/ticker/24hr').catch(e => {
      return [];
    });
  
    const parsedData: BinanceTicker[] = body.data.filter((index: BinanceTicker) => index.symbol.slice(-4) === 'USDT');
	...
};

🙆‍♂️ 올바른 코드

try/catch 는 response code가 정상 응답을 뜻하는 200 이 아닌 다른 것들은 전부 catch 로 빠지게 된다.

그렇다면 내가 의도한대로 try 에 존재하는 body 가 에러가 났으니 더 이상 밑으로 구문을 실행하지 않고 바로 catch 로 빠지게 되어 내가 원하는 빈배열 [] 을 얻을 수 있었다.

export const GetBinanceCoinList = async () => {
  try {
    const CoinList: ExchangeCoinList[] = [];
    const body: any = await axios.get('https://api.binance.com/api/v3/ticker/24hr');
    const parsedData: BinanceTicker[] = body.data.filter((index: BinanceTicker) => index.symbol.slice(-4) === 'USDT');
	...
  } catch (e) {
    return [];
  }
};

결론

정리하자면, return 또는 예외처리에 대한 값을 어떤 함수가 받아서 처리할 것인지에 대한 내용이었다.