Open API 호출하기

Open API를 호출할 때, 굉장히 단순한 방법으로 호출했었다.

 

const getData = async () => {
    const res = await fetch('/api/popular')
		.then((res) => res.json())
		.then((data) => setData(data.results));
	return res;
}

대충 위와 같은 방법으로 API의 데이터를 가져와서 사용했다.

그러나 이 처럼 사용했을 때, Console로 Log를 확인하면 Undefined가 우선 출력이 되고 다음에 가져온 데이터가 출력이 됐다.

 

그래서 Undefined가 나오지 않도록 API를 호출하는 방법을 검색해보았다.

위 처럼 사용하는 것보다 Try / Catch 문을 사용해서 호출하는 방법이 효율적이라는 글을 보게 되었다.

그래서 호출하는 방식을 바꿨다.

 

 useEffect(() => {
    getPopularData();
  }, []);

  const getPopularData = async () => {
   try {
      const getData = await axios.get('/api/popular');
      setPopularData(getData.data.results);
   }
   catch(e) {
      console.log('getPopularData error: ', e);
   }
}

위와 다르게 호출할 API가 존재할 경우, 성공했을 때 가져와서 사용하도록 하였다.

위 처럼 바꾸니 Undefined가 나오지 않고 바로 데이터가 호출되는 것을 확인할 수 있었다.

앞으로 API를 호출할 때, Try / Catch 문을 활용해야겠다.

 

사용하고 있는 예.

export default function NewsApiList() {
    const [articles, setArticles] = useState<NewsApiItems[]>([]);

    useEffect(() => {
        const cancelToken = axios.CancelToken.source();

        async function fetchNews() {
            try {
                const response = await axios.get<NewsApiData>(`https://newsapi.org/v2/top-headlines?country=kr&apiKey=${process.env.NEXT_PUBLIC_NEWS_API_KEY}`, {cancelToken:cancelToken.token});
                setArticles(response.data.articles);
            } catch (error) {
                console.error(error);
                if (axios.isCancel(error)) {
                    console.log("요청 취소");
                }
            }
        }

        fetchNews();

        return () => {
            cancelToken.cancel();
        }
    }, []);

    return (
        <div className="container">
            ...
        </div>
    )
}