Javascript 및 Typescript의 고급 try / catch / finally

try-catch-finally-block의 구현에 대해 자세히 살펴보십시오.

Javascript 및 Typescript의 오류 처리

런타임에 오류가 발생할 때마다 대부분의 프로그래밍 언어에서와 같이 Javascript 및 Typescript에서 "발생"됩니다. 처리되지 않은 오류가 발생하면 앱 또는 서비스가 중단되어 최악의 사용자 경험이 발생할 수 있습니다. 오류가 발생하면 저장되지 않은 진행 상황이 손실되고 사용자는 잠재적으로 긴 프로세스를 시작할 수 있습니다 (예 : 사용자가 많은 정보를 제공하여 플랫폼에 등록한 경우). 결과적으로 이러한 사용자는 신뢰를 잃었 기 때문에 제품을 다시 사용하지 않을 가능성이 큽니다.

이러한 경우를 처리하기 위해 오류를 "캐치"할 수 있습니다. Javascript 및 Typescript에서 오류를 포착하려면 "try"블록과 "catch"블록 뒤에 코드를 래핑하면됩니다.

async function getData(){
  try {
    // Call a dummy async 'fetch'-functoin
    const result = await fetch();
    return { result };
  } catch(error) {
    return { error };
  }
}

// ... later in your code ....

const { result, error } = await getData();

if (error){
  // ... handle error case.
}

// Access the results.

그 결과 오류가 전체 시스템을 통해 전파되지 않아 충돌이 발생하지만 코드 범위 내에서 직접 처리됩니다. 앱 또는 서비스가 다운되지 않으며 오류를 처리하기위한 완화 전략을 적용 할 수 있습니다.

"finally"블록을 사용한 특수 처리

오류를 처리하기위한 추가 단계로 Javascript 및 Typescript는 추가 "최종"키워드를 제공합니다. 이러한 "finally"블록은 "try"블록과 "catch"블록이 모두 실행 된 후 (오류가 발생한 경우) 범위 내에서 코드를 실행합니다.

// This function is absolutely save
// to call. It fetches some data and 
// optionally catches a potential error.
//
// After everything's done, a 'finally'
// sends the error to our backend for logs,
// if there was any.
async function getData(){
  // In this case, we store the result
  // and error in mutable variables,
  // then return both.
  let result: Result;
  let error: Error;
  
  try {
    // Call a dummy async 'fetch'-function
    result = await fetch();
  } catch(e) {
    error = e;
  } finally {
    // After the whole try/catch has been
    // processed, we can log the error.
    if(error){
      await trackErrorInCloud(error);
    }
  }
  
  return { result, error };
}

// ... same as before ...

하지만 더 있습니다! "try"-또는 "catch"-블록에 결과를 반환하더라도 "finally"-블록이 실행된다는 것을 알고 계셨습니까? 이것이 제가 의미하는 바의 예입니다.

// Same as the example before, but
// now we directly return from within
// each code block. And this is where
// a side effect can happen.
async function getData(){
  try {
    const result = await fetch();
    return { result };
  } catch(error) {
    return { error }
  } finally {
    //
    // WATCH OUT!
    //
    // Just for demo purpose, but this
    // line of code will override both
    // the return in 'try' as well as 'catch'!
    //
    // Returning inside of 'finally' is therefore
    // dangerous and will lead to hard-to-debug 
    // issues.
    return { finally: true };
  }
}

// data === { finally: true }
const data = await getData();

// Here's a better use case for
// finally.
async function getData(){
  let error: Error;
  
  try {
    const result = await fetch();
    return { result };
  } catch(e) {
    error = e;
    return { error }
  } finally {
    // No return in finally,
    // so it's safe to use.
    if(error){
      await logInCloud()
    }
  }
}

// if no error === { result: ... }
// if error === { error: ... }
const data = await getData();

요약

보시다시피 Javascript 및 Typescript에서 오류를 처리하는 것은 매우 쉽고 애플리케이션의 완전한 충돌을 방지합니다. "try"-및 "catch"-블록에서 결과를 반환하는 특수 처리는 "finally"-블록을 사용할 때 알아두면 좋지만 코드를 안티 패턴 스타일로 구현하지 않도록 악용해서는 안됩니다.

제안

관련된