사용자 정의 JS 오류 유형 만들기🤔

만약 네가 프로그래밍에 대해 상당히 낯설다면, 실수는 반드시 모든 대가를 아끼지 않고 피해야 하는 나쁜 일이라고 느낄 것이다.
오류가 발생했을 때, 우리는 페이지의 붕괴를 막기 위해 catch() 방법이나 try...catch 블록을 가지고 있어서 매우 고맙습니다.우리는 log 오류 메시지를 컨트롤러에 보내고 더 중요하고 쉽게 스트레스를 받지 않는 일을 계속 처리할 것입니다.

때로는 이런 정보가 빨간색이고, 때로는 호박색이며, 익숙하지 않은 초보자들에게는 신비롭거나 불안하다.

컨트롤

모든 잘못된 정보가 사실상 다른 개발자의 도움이라는 것을 깨닫게 되면 그 두려움은 사라지기 시작한다.
오류 메시지는 사실상 다른 개발자가 최선을 다해 귀하께 정보를 제공하는 것입니다. 이 정보를 사용하여 문제의 원인을 진단할 수 있습니다.
코드를 작성하고 있다면, 다른 개발자가 작성한 코드를 실행하고 문제가 발생할 수 있음을 의미합니다.너는 그 불쌍한 개발자를 도와 이 문제를 해결하고 싶을 것이다.

성공한 척하다

왜 지금부터 중급과 고급 개발자의 최선의 실천을 사용하지 않습니까?

에서 더 자세한 오류 메시지를 작성하기 시작합니다.

은 자신의 유형의 오류 대상을 구축하기 시작했다.

은 코드에서 고의로 오류 대상을 생성하기 시작했다.

일부러 오류를 던지고 잡았다.

오류 생성 방법

기본적인 오류 대상은 실제로 만들기 쉽다.

let err = new Error('This is my friendly message');

한 줄의 코드, 현재 당신은 자신의 Error 대상이 있습니다. 하나의 변수에서 당신은 당신의 코드를 전달할 수 있습니다.
오류 구조 함수에 전달된 String은 message 대상 중 Error 속성의 값이 된다.

어떻게 잘못을 던집니까?

Error 대상을 만들고 변수에 넣었기 때문에 오류가 발생하는 것은 아닙니다.브라우저가 오류에 반응하려면 throw이어야 합니다.
그것을 공중으로 화염을 쏘는 것으로 상상할 수 있다.만약 네가 다른 사람에게 너의 잘못을 주의하게 하고 싶다면, 우리는 모두의 주의를 끌 필요가 있다.

let err = new Error('This is my friendly message');
throw err;
//or alternatively
throw new Error('This is my friendly message');

throw에서 오류가 발생했을 때, 스크립트가 붕괴되어 컨트롤러에 메시지를 쓰거나, 던진 오류를 포착하려면 try...catch 블록이나 catch( ) 방법이 필요합니다.
스크립트가 충돌하지 않도록 컨트롤에 있는 오류 메시지를 보려면 다음 코드 세션을 시도하십시오.필요한 경우 브라우저 콘솔에서 직접 실행할 수 있습니다.

시도붙들다

try{
  throw new Error('This is my friendly message');
}catch(err){
  console.log(err.message);
}

캡처()

Promise.resolve()
  .then( () => {
    throw new Error('This is my friendly message');
  })
  .catch( err => {
    console.log(err.message);
  });

사용자 정의 오류 만들기

콘솔에서 우호적인 소식을 보여주는 것은 좋지만 현실 세계에서 우리의 코드에는 실제 문제가 존재한다.
우리는 때때로 if 문구만 사용하여 일부 상황을 처리한다. 사용자가 사용자의usernam을 제공하지 못했다.검색 문자열에 잘못된 제품 참고 코드를 입력했습니다.AJAX 호출 중 네트워크 고장 발생;다른 일상도 많다.
우리는 각각의 type/Error 대상을 창설할 수 있다.우리는 Error 대상에 오류에 대한 다른 정보를 추가할 수 있습니다.우리는 throw과 catch에서 이러한 오류를 찾을 수 있으며, 우리의 코드가 실패에 더욱 저항하고, 다른 개발자에게 더 많은 세부 사항을 제공할 수 있다.
이 코드는 class 키워드를 사용할 수 있거나 사용하지 않을 수 있지만, class 버전을 보여 드리겠습니다.fetch()의 브라우저 오프라인으로 인해 실패한 호출에 사용할 특수한 형식의 오류를 만들 것입니다.

class NetworkError extends Error{
  constructor(msg, url){
    super(msg);
    this.name = 'NetworkError';
    this.target = url;
  }
}

나의 새로운 오류 유형은 NetworkError이라고 불릴 것이다.표준 Error 객체의 모든 속성을 상속합니다.단, target이라는 추가 속성을 획득하며, 이 속성은 고장이 발생했을 때 사용 중인 URL을 저장합니다.

오류를 해결 방안의 일부분으로 삼다

그래서 우리는 현재 자신의 NetworkError 유형의 대상을 가지고 있으며 이를 JS 파일에 추가하거나 모든 프로젝트에서 사용하는 실용 프로그램 파일에 넣을 수 있다.
우리는 그것을 우리 프로젝트의 일부분으로 사용에 투입할 것이다.

document.body.addEventListener('click', (ev) => {

let url = `http://jsonplaceholder.typicode.com/users/10`;

fetch(url)
  .then((response) => {
    //we got a response from the server
    if(response.status == 404){
      throw new NetworkError(response.statusText, url);
    }
    //run more code on the response.
    return response.json();
  },
  (err)=>{
    //err is a general error happened with fetch( )
    //this is a network failure, usually meaning offline
    throw new NetworkError('Unable to reach server.', url);
  })
  .then((data) => {
    console.log(data);
  })
  .catch( err => {
    //err could be either of those NetworkErrors or
    //an error that happened in the `run more code on the response`
    //check for the type of error
    switch(err.name){
      case 'NetworkError':
        //handle our network errors.
        console.warn(`Dude. You were totally trying to access ${err.url}. And then the browser was all like ${err.message}`);
        break;
      default:
        //handle any other errors
        console.error(`At least it wasn't a Network error. ${err.message}`);
    }
  });

}

웹 페이지에 모든 스크립트를 넣고 '개발 도구' 의 '네트워크' 옵션 카드에서 브라우저를 오프라인으로 설정합니다.

온라인으로 스크립트를 한 번 실행하고 브라우저 옵션을 오프라인으로 한 번 실행하면 컨트롤에서 사용자 정의 NetworkError 메시지를 볼 수 있습니다.

나는 fetch()을 둘러싸고 클릭 이벤트 리스트 함수를 호출했다.특정 컨텐트를 클릭하려면 다음 CSS를 추가해야 할 수도 있습니다.

body {
  min-height: 100vh;
  background-color: #333;
  cursor: pointer;
}

오류 처리, 자바스크립트, 또는 거의 모든 웹 개발 주제에 대한 정보를 알고 싶으면, 수백 개의 동영상 강좌를 보십시오.