[JavaScript] fetch함수에서의 에러(Error) 처리

react환경에서의 fetch 함수로 api요청한 실습

 

 

// fetch함수를 통한 GET요청 -> 데이터를 가져옴
fetch('https://주소.json')
  // then함수를 사용해 가져온 데이터를 출력
  .then ((response) => {
  	// callback함수
    return response.json()
  })
  // 파싱한 결과를 출력해 볼 때 
  .then ((result) => {
    console.log(result)
  })

 

[에러 처리]

fetch('https://주소.json')
  .then ((response) => {
    return response.json()
  })
  .then ((result) => {
    console.log(result)
  })
  // 에러처리
  .catch(() => {
  	console.log('에러')
  })

 

catch( ) 메서드

• 에러 처리 콜백을 지정해 줄 수 있다. 
• 만약 then 메서드 안에서 에러가 발생하면 try...catch구문과 유사하게 처음만나는 에러 처리 콜백으로 코드로 건너뛰어 실행한다
• 출처 : Hello World JavaScript 비동식 코드에서의 예외처리

 

 

좀 더 정확히 사용하려면

응답(response)의 결과값에 따라 메세지 출력하도록 추가

fetch('https://주소.json')
  .then ((response) => {
  	// reponse가 ok가 아닐 때
  	if (!reponse.ok){
      throw new Error('400 or 500 에러 발생')
    }
    return response.json()
  })
  .then ((result) => {
    console.log(result)
  })
  .catch(() => {
    console.log('에러 발생')
  })

 

throw문 (MDN 명세)

• thow문을 통해 사용자 정의 예외를 발생(throw)할 수 있음
• 예외가 발생하면 현재 함수의 실행이 중지.
• throw 이후의 명령문은 실행되지 않음
• 제어 흐름은 콜스택의 첫 번째 catch블록으로 전달됩니다. 호출자 함수 사이에 catch 블록이 없으면 프로그램이 종료됩니다. 

new Error('') 생성자 (MDN명세) - 오류 객체 생성

new Error()
new Error(message)
new Error(message, fileName)
new Error(message, fileName, lineNumber)