sitelink1 | |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | http://1 |
extra_vars4 | ko |
extra_vars5 | http://www.javascriptkit.com/javatutors/trycatch.shtml |
extra_vars6 | sitelink1 |
Error handling, like many aspects of JavaScript, has been maturing since the dark ages of Netscape and IE4. No longer are you forced to settle for what the browser throws in your face in an event of a JavaScript error, but instead can take the matter into your own hands. The try/catch/finally
statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a JavaScript "exception" is encountered. Along with other defensive coding techniques such as Object detection and the onError event, try/catch/finally
adds the ability to navigate around certain errors that in the past would have instantly stopped your script at its tracks. No more!
try/catch/finally
try/catch/finally
are so called exception handling statements in JavaScript. An exception is an error that occurs at runtime due to an illegal operation during execution. Examples of exceptions include trying to reference an undefined variable, or calling a non existent method. This versus syntax errors, which are errors that occur when there is a problem with your JavaScript syntax. Consider the following examples of syntax errors versus exceptions:
alert("I am missing a closing parenthesis //syntax error
alert(x) //exception assuming "x" isn't defined yet
undefinedfunction() //exception
try/catch/finally
lets you deal with exceptions gracefully. It does not catch syntax errors, however (for those, you need to use the onerror event). Normally whenever the browser runs into an exception somewhere in a JavaScript code, it displays an error message to the user while aborting the execution of the remaining code. You can put a lid on this behaviour and handle the error the way you see fit using try/catch/finally
. At its simplest you'd just use try/catch
to try and run some code, and in the event of any exceptions, suppress them:
try{
undefinedfunction()
}
catch(e){
//catch and just suppress error
}
Assuming undefinedfunction()
is undefined, when the browser runs the above, no errors will be shown. The syntax for try/catch/finally
is a try
clause followed by either a catch
or finally
clause (at least one or both of them). The catch
clause if defined traps any errors that has occurred from try
, and is indirectly passed the error object that contains additional info about the error. Lets see a slightly more complex example now:
try{
undefinedfunction()
alert('I guess you do exist')
}
catch(e){
alert('An error has occurred: '+e.message)
}
Click on the above button, and notice how only "An Error has occurred" alert pops up, but not "I guess you do exist". This tells us that when try
encounters an error, it immediately skips any remaining code inside it and goes straight to catch
. The default error message is obviously suppressed, though you can still retrieve this information by accessing the Error object that gets indirectly passed into catch
. We'll look at the Error object in detail on the next page.
There's another clause, finally
, that if defined will be executed regardless of whether an error occurs in the try
clause proceeding it:
try{
undefinedfunction()
alert('I guess you do exist')
}
catch(e){
alert('An error has occurred: '+e.message)
}
finally{
alert('I am alerted regardless of the outcome above')
}
finally
can be useful when you need to "clean up" after some code inside try
. While it's true finally
will always be executed if defined, certain statements inside try such as continue
, break
, return
, or when an error has occurred and there is no catch
clause will all cause finally
to be executed immediately thereafter. In the following example, the value "5" is alerted, since control is handed over to finally
when i reaches 5 inside try:
try{
for (var i=0; i<10; i++){
if (i==5)
break
x=i
}
}
finally{
alert(i) //alerts 5
}
Nested try/catch/finally statements
As a reminder, try
should never be defined just by itself, but always followed by either catch
, finally
, or both. Within each clause, you can define additional try/catch/finally
statements following the same aforementioned rule. Take the instance where an error has occurred within the catch
clause- defining an additional try/catch
statement inside it takes care of it:
var ajaxrequest=null
if (window.ActiveXObject){ //Test for support for different versions of ActiveXObject in IE
try {
ajaxrequest=new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
ajaxrequest=new ActiveXObject("Microsoft.XMLHTTP")
} //end inner try
catch (e){
alert("I give up. Your IE doesn't support Ajax!")
} //end inner catch
} //end outer catch
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
ajaxrequest=new XMLHttpRequest()
ajaxrequest.open('GET', 'process.php', true) //do something with request
Here I'm using a nested try/catch
statement to try and determine in IE which version of the ActiveX Object it supports that's needed to initialize an Ajax request. Using object detection won't work here, since the issue isn't whether the browser supports ActiveXObject
here, but which version.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
117 | CORS 관련 레퍼런스 URL | 황제낙엽 | 2020.07.10 | 53 |
116 | Navigator 객체란? | 황제낙엽 | 2011.02.22 | 53 |
115 | Function.apply() 와 Function.call() | 황제낙엽 | 2011.10.07 | 51 |
114 | JavaScript 재입문 | 황제낙엽 | 2012.05.29 | 50 |
113 | insertAdjacentHTML Method | 황제낙엽 | 2005.12.19 | 50 |
112 | ECMA 스크립트의 JSON | 황제낙엽 | 2019.10.16 | 48 |
111 | String 에 trim() 함수 적용하기 | 황제낙엽 | 2011.08.28 | 48 |
110 | 3시간 걸려서 만든 입력폼 자릿수체크 스크립트 | 황제낙엽 | 2006.04.22 | 48 |
109 | 멤버 연산자 | 황제낙엽 | 2014.12.30 | 47 |
108 | 연산자 (===, ==, >=, <=) | 황제낙엽 | 2012.05.30 | 47 |
107 | [key:value] 형태로 object를 저장할 수 있는 Static영역의 해쉬맵 클래스 (Map) | 황제낙엽 | 2008.11.04 | 46 |
106 | Dynatrace For Ajax Performance | 황제낙엽 | 2010.08.18 | 45 |
105 | CORS(Cross-Origin Resource Sharing) - 3 | 황제낙엽 | 2017.03.07 | 45 |
104 | 폼으로 XML 데이터 전송 (JSP+Javascript) | 황제낙엽 | 2005.12.04 | 43 |
103 | delete 연산자에 대한 고찰 | 황제낙엽 | 2012.06.11 | 42 |
102 | object clone | 황제낙엽 | 2011.07.08 | 41 |
101 | User Agent 관련 Reference URL | 황제낙엽 | 2011.02.22 | 41 |
100 | 잘못된 종속관계 해지에 따른 메모리 누수 예제 | 황제낙엽 | 2009.04.03 | 41 |
99 | [펌] 아사페릴의 사생활 - prototype과 __proto__ 와 constructor | 황제낙엽 | 2009.04.02 | 41 |
98 | withCredentials 관련 | 황제낙엽 | 2020.07.29 | 39 |