[JS] Error (Try catch & throw)

 

 

 

 

 

 

 

ERROR

  

  대표적 에러 3가지

  ReferenceError : 존재하지않는 변수나 함수 호출

  TypeError : 잘못된 방식으로 자료형다룸 (변수를 함수처럼 호출)

  SyntaxError : 문법 맞지않는 호출

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error

Error - JavaScript | MDN

 

 

 

 

 

 

Try catch

 

 

 

 : javascript에서 에러가 발생하면 스크립트는 중단되고 콘솔에 에러가 출력된다.

  이를 방지하기 위해서, 에러를 catch해서 스크립트가 중단되지 않고 더 합당한 뭔가를 할 수 있게한다.

 

 

🔻 예외처리 (exception handling)

     : JS에서는 에러라고 인식하지 않아도, 내가 생성한 함수의 규칙과 어긋난다면 에러로 처리한다.

try {
 //코드
} catch (error) {
 //에러가 발생했을 때 동작할 코드
}

1. try {...} 코드실행

2. 에러 없다면, try안의 마지막 줄까지 실행, catch는 건너뛴다.

2-1. 에러 있다면, try 실행중단 > catch로 넘어간다. (err의 변수는 에러설명담긴 객체를 포함한다)

 

 

//에러인 코드 생략하고 다음코드까지 실행됨
try {
 console.log('에러 전');
 
 const code = '코드';
 console.log(code)
 
 code;         //err발생! > catch로 넘어감
 
 const language = 'java';    //실행되지않음
 console.log(language);
 
} catch (err) {
 console.log('에러 후');
 console.log(err);            //ReferenceError
 console.log(err.name);       //code is not defined
 console.log(err.message);    //ReferenceError : code is not defined
 alert(err);  
}

//출력 : 에러 전, 코드, 에러 후, ReferenceError~~
//실제 에러 창으로 출력하고 싶으면 console.error(err)로 출력
//alert(err);  "name:message" 형태의 문자열로 변환된다.

catch 블록 안에서 오류를 기록할 땐 console.log()보다 console.error()를 사용하는 것이

출력 형식도 오류에 적합하고, 현재 페이지에서 발생한 오류의 목록도 업데이트 되어 좀 더 좋다.

 

 

 

 

 

 

 finally문 : try catch문 끝난 다음에 최종적으로 실행될 코드 (에러여부 상관없이 항상 실행)

 

try {
  실행할 코드                    //try에서 에러 발생안하면 try > finally
} catch (err) {
  에러 발생 시 실행할 코드          //try에서 에러 발생하면 catch > finally
} finally {
  항상 실행할 코드
}

 

 

 

 

 

 

 

 

 

throw

 

 

 

throw는 사용자가 정의한 '예외'를 발생(throw) 할 수 있다.

예외가 발생하면 현재 함수의 실행이 중지되고 catch블록으로 전달된다. (없다면 프로그램 종료)

 

 

throw 표현식

const sum=(x,y)=> {   //숫자더하는 함수
if(typeof x!=='number' || typeof y!=='number') {    
  throw '숫자입력해라'      //둘 중 하나라도 숫자가 아니라면 '숫자입력해라' 에러던져준다.
}
  return x+y      //아님 걍 더해줌
}

console.log(sum(a,2))
// '숫자입력해라'

 

 

 

error 객체를 사용하게 되면 오류의 유형에 따라 좀 더 정제된 메세지를 가져올 수 있다.

throw new Error('메세지');

 

 

 

try catch와 함께 사용

try {
  실행할 코드 - 정상코드는 실행
  예외가 필요할 시 throw로 발생
} catch (err) {
  try에서 예외 발생한 경우에만 실행
  지역변수 err를 사용하여 Error객체 똔느 앞에서 던진 다른 값을 참조가능
} finally {
  try에서 일어난 일에 관계없이 무조건 실행
}

 

 

 

 

 

---

 

 

 

 

 

Axios에서 에러처리

 

axios.get('/api')
  .then(response => { 
    // do stuff 
  }) 
  .catch(err => { 
    // what now? 
    console.log(err); 
  })

 

axios.post(url, data)
  .then(res => { 
    //
  }) 
  .catch(err => { 
    if (err.response) { 
      // client received an error response (5xx, 4xx)
      console.log(err.response.data);
      console.log(err.response.status);
      console.log(err.response.headers);
    } 
    else if (err.request) { 
      // 요청이 이루어 졌으나 응답을 받지 못햇다.
      console.log(err.request);
    } else { 
      // anything else 
    } 
  })

 

    .catch((err) => {
        if (err.response.status === 400) {
          actions.resetForm();
          alert(`User elready exist`);
        } else alert(`Failed to sign up please try again`);
      });

 

 

 

---

 

 

 

Response Status Codes

 

  200: OK

• 가장 자주 보게되는 Status Code
• 문제없이 요청에 대한 처리가 백엔드 서버에서 이루어지고 나서 오는 응답코드
• 우리는 모두 200 OK 를 원한다

 

201: Created

• 무언가가 잘 생성되었을 때에(Successfully Created) 오는 Status Code
• 대게 POST 메소드의 요청에 따라 백엔드 서버에 데이터가 잘 생성 또는 수정 되었을 때에 보내는 코드

 

400: Bad Request

• 해당 요청이 잘못되었을 때 보내는 Status Code
• 주로 요청의 Body에 보내는 내용이 잘못되었을 때 사용되는 코드
• ex) 전화번호를 보내야 하는데 숫자가 아닌 문자열의 주소가 대신 Body에 담겼을 경우

 

401: Unauthorized

• 유저가 해당 요청을 진행하려면 먼저 로그인을 하거나 회원가입이 필요하다는 의미
• ex) wish list, 좋아요 기능은 회원이 아니면 요청을 보낼 수 없음

 

403: Forbidden

• 유저가 해당 요청에 대한 권한이 없다는 뜻
• 접근 불가능한 정보에 접근했을 경우
• ex) 오직 유료회원만 접근할 수 있는 데이터를 요청 했을 때

 

404: Not Found

• 요청된 URI 가 존재하지 않는다는 의미

 

500: Internal Server Error

• 서버에서 에러가 났을 때의 Status Code
• API 개발을 하는 백엔드 개발자들이 싫어하는 코드 (프론트는 내 잘못 아니라는 것을 알 수 있는 코드)

 

 

보다 더 자세한 HTTP Response Status Codes MDN link

HTTP response status codes - HTTP | MDN