JavaScript :: 예외처리 try-catch

미리 에러가 나올만한 상황을 대비해서 에러핸들링을 적절하게 해주는 것이 좋은 코드

1. try 블럭 안에 있는 코드를 실행하다가 에러가 나면
 2. catch 블럭 안에 들어가서 에러를 실행
3. 에러가 없다면 catch 블럭을 무시하고 넘어간다
4. try / catch는 오직 런타임 에러에만 동작한다. 즉, 실행 가능한 코드에만 try/catch가 사용될 수 있다
5. 만약에 {} 중괄호 짝이 안맞다던지, 등등의 문법적인 에러로 돌아가지 않는 코드라면 try/catch가 동작할 수 없다

 

 try{
 	에러가 발생될 수 있는 코드 입력
 }catch(error){
        에러 핸들링
        }

 

try 에서 에러가 생기면 catch 블럭에 error정보를 error객체 안에 넣어서 매개변수로 전달해준다
Error객체를 살펴보면, 안에 name, message 등 이용가능한 여러 속성값이 있지만,

에러를 보기위해서는 Error.message만 기억해도 좋다

 

catch는 try안에서 생긴 에러를 잡는다

 //error handling
            try {
                프론트;
            } catch (error) {
                console.log('내가 잡은 에러는 ...', error.message);
            }

내가 잡은 에러는 ... 프론트 is not defined

 

 

빨간 에러창이 뜨는게 아니라 catch에 있는 에러를 잡은 메세지가 뜬다

 

내가 원하는방향으로 에러를 핸들링 할 수 있다

유저들에게 에러가 난 이유를 알려줄 수도 있다

 

new Error();

new가 나오고 그 다음에 대문자로 시작하는 단어가 나오면 

객체라고 생각하면 된다

 

 

 

예제

try {
                let height = 170;
                if (height < 175) {
                    throw new Error('당신은 너무 작다');
                }
                console.log('good^^');
            } catch (error) {
                console.log('내가 잡은 에러는 ...', error.message);
            }

에러가 발생하면 그 코드는 거기서 끝이 난다

 

  try {
                let height = 180;
                if (height < 175) {
                    throw new Error('당신은 너무 작다');
                }
                console.log('good^^');
            } catch (error) {
                console.log('내가 잡은 에러는 ...', error.message);
            }

에러가 발생하지 않으면 try안에 있는 콘솔이 출력 된다

 

 

---

 

 

const getNews = async () => {
    try {
        let header = new Headers({ 'x-api-key': 'H5bBKeDDN1pzJlqRuinWFwTqBlcoS06fSd4_B91s7BEaaa' });
        let response = await fetch(url, { headers: header });
        let data = await response.json(); //json : 서버통신에 사용 되어짐.텍스트 타입인 객체라고 보면 된다
        //200(정상으로 실행 될 때의 상태)
        if (response.status == 200) {
            news = data.articles; //아티클만 따로 뽑아내기 (뉴스 기사만 유저들에게 보여주기)
            console.log('news는?', news);
            render();
        } else {
            //에러를 던져준다
            throw new Error(data.message);
        }
    } catch (error) {
        console.log('잡힌 에러는?', error.message);
    }
};

else 에서는 200을 제외한 나머지 에러를 다 넣는다

 

 

 

message :  "Invalid api key: H5bBKeDDN1pzJlqRuinWFwTqBlcoS06f

 

 

 

 

콘솔창에

잡힌 에러는? Invalid api key: H5bBKeDDN1pzJlqRuinWFwTqBlcoS06fSd4_B91s7BEaaa 라고 뜬다

 

이 에러메시지를 유저가 확인할 수 있도록 html창에 보여지도록 한다

 

부트스트랩에서 경고창 코드 가져오기

<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>

 

 

 

 

 

 

API 응답에서 에러가 났는지 확인하는 방법

1. response.status 를 통해서 아는 방법 : 주로 디테일하게 어떤 종류의 에러인지 에러코드를 보내준다 (400,401 등등)
2. response.ok 를 보는 방법 : ok가 true면 정상, false면 비정상. 자세한 코드는 나타나지 않는다.
3. 응답에 따라서 throw를 이용해서 내가 보여주고 싶은 메세지와 함께 에러를 catch로 던질 수 있다.
4. 그 외에 내가 에러를 발생시키고 싶은 상황이 있다면, throw를 통해서 강제로 에러를 던질 수도 있다.