> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 예외 처리 방법을 함께 분석해 봅시다.

JavaScript 예외 처리 방법을 함께 분석해 봅시다.

WBOY
풀어 주다: 2022-08-04 16:27:34
앞으로
1611명이 탐색했습니다.

이 기사에서는 주로 예외 처리와 관련된 문제를 소개하는 관련 지식을 제공합니다. 일부 오류는 프로그램 작성 과정에서 필연적으로 발생합니다. 이러한 오류를 방지하는 방법과 수행 방법을 배울 수 있습니다. 다음번에는 모두에게 도움이 되기를 바랍니다.

JavaScript 예외 처리 방법을 함께 분석해 봅시다.

【관련 권장사항: javascript 비디오 튜토리얼, web front-end

오류는 프로그래밍 과정의 일부입니다. 프로그램을 작성하는 과정에서 필연적으로 오류가 발생하기 마련입니다. 이러한 오류를 통해 우리는 이러한 상황을 피하는 방법과 다음에 더 잘할 수 있는 방법을 배울 수 있습니다.

JavaScript에서는 코드 문이 긴밀하게 결합되어 오류가 발생하면 나머지 코드 문을 계속 사용하는 것은 의미가 없습니다. 대신, 우리는 가능한 한 우아하게 실수로부터 회복하려고 노력합니다. JavaScript 인터프리터는 이러한 오류가 발생할 때 예외 처리 코드를 확인하고, 예외 처리기가 없으면 프로그램은 오류를 일으킨 함수로 돌아갑니다.

예외 핸들러를 찾거나 최상위 함수에 도달할 때까지 호출 스택의 모든 함수에 대해 이 작업을 반복합니다. 이로 인해 프로그램이 오류로 종료되어 프로그램이 충돌하게 됩니다.

일반적으로 이를 처리하는 방법에는 두 가지가 있습니다.

  • 예외 발생 — 런타임에 의미 있게 처리할 수 없는 문제가 발생하면 해당 문제를 발생시키는 것이 좋습니다

function openFile(fileName) {
  if (!exists(fileName)) {
    throw new Error('找不到文件 ' + fileName)
  }
  // ...
}
로그인 후 복사
  • Catching Exceptions - 발생한 예외는 더 합리적인 런타임에 포착되어 처리됩니다

try {
  openFile('../test.js')
} catch(e) {
  // 优雅地处理抛出的期望
}
로그인 후 복사

이러한 작업을 더 자세히 살펴보겠습니다.

예외가 발생했습니다

ReferenceError: 사양이 정의되지 않았습니다.와 같은 내용이 표시될 수 있습니다. 이는 throw 문을 통해 발생한 예외를 나타냅니다.

Syntax

throw «value»
// 不要这样做
if (somethingBadHappened) {
  throw 'Something bad happened'
}
로그인 후 복사

예외로 발생할 수 있는 데이터 유형에는 제한이 없지만 JavaScript에는 특별한 내장 예외 유형이 있습니다. 그 중 하나는 이전 예에서 본 것처럼 오류입니다. 이러한 기본 제공 예외 유형은 예외 메시지보다 더 자세한 정보를 제공합니다.

Error

Error 유형은 일반적인 예외를 나타내는 데 사용됩니다. 이러한 유형의 예외는 사용자 정의 예외를 구현하는 데 가장 일반적으로 사용됩니다. 두 가지 기본 제공 속성을 사용할 수 있습니다.

  • message — 오류 생성자에 매개변수로 전달된 콘텐츠입니다. 예를 들어 new Error('오류 메시지입니다.')입니다. message 속성을 통해 메시지에 액세스할 수 있습니다.

const myError = new Error('Error!!!')
console.log(myError.message) // Error!!!
로그인 후 복사
  • stack — 이 속성은 오류를 발생시킨 파일의 기록(호출 스택)을 반환합니다. 스택 상단에는 메시지도 포함되어 있으며, 최신/격리된 오류 지점부터 시작하여 가장 바깥쪽 책임 파일까지 실제 스택이 뒤따릅니다.

Error: Error!!!
    at <anonymous>:1:1
로그인 후 복사

참고: new Error('...')는 던지기 전에 어떤 작업도 수행하지 않습니다. 즉, throw new Error('error msg')는 JavaScript에서 Error 인스턴스를 생성하고 스크립트 실행을 중지합니다. , 오류를 잡는 등 오류에 대해 뭔가를 하지 않는 한.

예외 잡기

이제 예외가 무엇인지, 예외를 던지는 방법을 알았으니, 예외를 잡아서 프로그램이 중단되는 것을 막는 방법에 대해 논의해 보겠습니다.

try-catch-finally는 예외를 처리하는 가장 간단한 방법입니다.

try {
  // 要运行的代码
} catch (e) {
  // 发生异常时要运行的代码
}
  
[ // 可选
  finally {
    // 无论发生异常都始终执行的代码
  }
]
로그인 후 복사

try 절에 예외를 생성할 수 있는 코드를 추가합니다. 예외가 발생하면 catch 절이 실행됩니다.

코드가 예외를 생성하는지 여부에 관계없이 코드를 실행해야 하는 경우가 있습니다. 이 경우 선택적 finally 블록을 사용할 수 있습니다.

try 또는 catch 절이 return 문을 실행하더라도 finally 블록이 실행됩니다. 예를 들어, 다음 함수는 finally 절이 마지막으로 실행된 것이므로 'Execute finally'를 반환합니다.

function foo() {
  try {
    return true
  } finally {
    console.log(&#39;Execute finally&#39;)
  }
}
로그인 후 복사

코드의 정확성을 미리 확인할 수 없는 곳에 try-catch를 사용합니다.

const user = &#39;{"name": "D.O", "age": 18}&#39;
try {
  // 代码运行
  JSON.parse(params)
  // 在出现错误的情况下,其余的代码将永远无法运行
  console.log(params)
} catch (err) {
  // 在异常情况下运行的代码
  console.log(err.message) // params is not defined
}
로그인 후 복사

위에 표시된 것처럼 코드를 실행하기 전에 JSON.parse를 확인하여 문자열화 개체나 문자열을 가져오는 것은 불가능합니다.

참고: 프로그램 생성 예외와 런타임 예외는 포착할 수 있지만 JavaScript 구문 오류는 포착할 수 없습니다.

try-catch-finally는 동기화 오류만 포착할 수 있습니다. 비동기 코드와 함께 사용하려고 하면 비동기 코드가 실행을 완료하기 전에 try-catch-finally가 실행될 수 있습니다.

비동기 코드 블록에서 예외를 처리하는 방법

콜백 함수

콜백 함수를 사용하면(권장되지 않음) 일반적으로 아래와 같이 두 개의 매개변수를 받습니다.

async function(code, (err, result) => {
  if (err) return console.error(err)
  console.log(result)
})
로그인 후 복사

두 개의 매개변수가 있는 것을 볼 수 있습니다: err 그리고 결과. 오류가 있는 경우 err 매개변수는 오류와 동일하며 예외 처리를 위해 이를 던질 수 있습니다.

在 if (err) 块中返回某些内容或将其他指令包装在 else 块中都很重要。否则,您可能会遇到另一个错误。例如,当您尝试访问 result.data 时,result 可能未定义。

Promises

使用 promises 的 then 或者 catch,我们可以通过将错误处理程序传递给 then 方法或使用 catch 子句来处理错误。

promise.then(onFulfilled, onRejected)
로그인 후 복사

也可以使用 .catch(onRejected) 而不是 .then(null, onRejected) 添加错误处理程序,其工作方式相同。

让我们看一个 .catch 拒绝 Promise 的例子。

Promise.resolve(&#39;1&#39;)
  .then(res => {
    console.log(res) // 1
    throw new Error(&#39;go wrong&#39;) // 抛出异常
})
.then(res => {
  console.log(res) // 不会被执行
})
.catch(err => { 
  console.error(err) // 捕获并处理异常 ——> Error: go wrong
})
로그인 후 복사

使用 async/await 和 try-catch

使用 async/await 和 try-catch-finally,处理异常是轻而易举的事。

async function func() {
  try {
    await nonExistentFunction()
  } catch (err) {
    console.error(err) // ReferenceError: nonExistentFunction is not defined 
  }
}
로그인 후 복사

如何处理未捕获的异常

现在我们已经很好地理解了如何在同步和异步代码块中执行异常处理,让我们回答本文最后一个待解决的问题 :我们如何处理未捕获的异常?

在浏览器中

我们可以使用 window.onerror() 方法来处理未捕获的异常。每当运行时发生错误时,该方法会在 window 对象上触发 error 事件。

onerror() 的另一个实用做法是:当站点中的图片或视频等数据加载出错时,可以用该方法触发某些操作。例如,提供一张加载出错时的图片,或显示一条消息。

<img src="logo.png" onerror="alert(&#39;Error loading picture.&#39;)" />
로그인 후 복사

在 Node.js 中

EventEmitter 模块派生的 process 对象可以订阅事件 uncaughtException。

process.on(&#39;uncaughtException&#39;, () => {})`
로그인 후 복사

我们可以传递一个回调来处理异常。如果我们尝试捕获这个未捕获的异常,进程将不会终止,因此我们必须手动完成。

uncaughtException 仅适用于同步代码。对于异步代码,还有另一个称为 unhandledRejection 的事件。

process.on(&#39;unhandledRejection&#39;, () => {})
로그인 후 복사

决不要尝试为基本 Error 类型实现 “捕获所有” 处理程序。这将混淆所发生的一切,并损害代码的可维护性和可扩展性。

关键要点

throw 语句用于生成用户定义的异常。在运行时,当 throw 遇到语句时,当前函数的执行将停止,控制权将传递给 catch 调用堆栈中的第一个子句。如果没有 catch 子句,程序将终止

JavaScript 有一些内置的异常类型,最值得注意的是 Error,它返回 Error 中的两个重要属性:stack 和 message。

try 子句将包含可能产生异常的代码,catch 子句会在发生异常时执行。

对于异步代码,最好使用 async/await 配合 try-catch 语句。

可以捕获未处理的异常,这可以防止应用程序崩溃。

不要觉得麻烦,异常处理可以帮助您提高代码的可维护性、可扩展性和可读性。

【相关推荐:javascript视频教程web前端

위 내용은 JavaScript 예외 처리 방법을 함께 분석해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:jianshu.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿