[js, http]로딩 및 에러 처리

??Loading 처리??

 

클라이언트에서 서버에 요청을 보내고,  그 요청을 응답받기 까지는 시간이 소요된다.

데이터 크기, 네트워크 환경에 따라 오래 걸린다.

사용자가 느끼기엔 소요되는 시간 만큼 빈 화면이 노출되면 굉장한 불편함을 얻게 된다.(이탈자 발생 !!)

그래서 loading 처리가 필요하다.

전 게시물에서 진행했던 것에서 이어서 보여주자면,

import {React, useEffect, useState} from 'react';
import NewsItem from '../NewsItem';

const NewsList = () => {
  const [news, setNews] = useState([])
  const [isLoading, setLoading] = useState(false)
  useEffect(() => {
    getNewsList();
  }, [])
  const getNewsList = async () => {
    setLoading(true)
    const response = await fetch('https://newsapi.org/v2/everything?q=tesla&from=2023-07-21&sortBy=publishedAt&apiKey=발급받은 api키')
    const data = await response.json()
    setNews(data.articles)
    setLoading(false)
  }
  return (
    <div>
      {!isLoading && news.map((news, index) => <NewsItem {...news} key={index}/>)}
      {isLoading && <p>로딩 중입니다..</p>}
    </div>
  );
};

export default NewsList;

isLoading 값을 추가해서 response가 다와서 세팅되기 전에는 isLoading이 true이기 때문에 로딩 중입니다...가 보이게 됩니다!

 

 

??Error 처리??

서버로부터 응답이 항상 성공적으로 오지 않기 때문에 status code를 통해 성공인지 실패인지 등을 확인해야한다.

status code에는 여러가지가 있다.

400번대 에러는 client 에러, 500 번대 에러는 server 에러를 말한다.

• 200 : success
• 401 : Unauthorized
• 403 : Forbidden
• 404 : Not found
• 500 : Internal Server Error

??try ... catch??

서버와 요청, 응답을 주고받는 코드를 try {} ... catch() {} 로 감싸줘서 처리해야한다.

그러면 어떤 부분에서 에러가 나는지 확인할 수 있다.

import {React, useEffect, useState} from 'react';
import NewsItem from '../NewsItem';

const NewsList = () => {
  const [news, setNews] = useState([])
  const [isLoading, setLoading] = useState(false)
  useEffect(() => {
    getNewsList();
  }, [])
  const getNewsList = async () => {
    try {
      setLoading(true)
      const response = await fetch('https://newsapi.org/v2/everything?q=tesla&from=2023-07-21&sortBy=publishedAt&apiKey=발급받은 api 키')
      const data = await response.json()
      setNews(data.articles)
      setLoading(false)
    } catch (err) {
      console.log(err)
    }
  }
  return (
    <div>
      {!isLoading && news.map((news, index) => <NewsItem {...news} key={`news-${index}`}/>)}
      {isLoading && <p>로딩 중입니다..</p>}
    </div>
  );
};

export default NewsList;