[JavaScript] 예외처리

예외처리

실행중인 프로그램에서 예기치 못한 상황이 발생하여 더이상 진행하지 못 할때 처리할 수 있도록 한다. 

 

만약에 서버 주소가 잘못되어 있다면 try catch 문을 통해 예외처리를 할 수 있다. 

 

const h1El = document.querySelector('h1');
const ulEl = document.createElement('ul');
ulEl.classList.add('users');
document.body.append(ulEl);

h1El.addEventListener('click', async () => {
  const loaderEl = document.createElement('div');
  loaderEl.classList.add('loader');
  ulEl.innerHTML = '';
  ulEl.append(loaderEl);

  try {
    // 서버로부터 데이터 가져오기
    const res = await fetch('https://jsonplaceholder.typicode.com/users'); // 테스트용 API
    const data = await res.json();

    console.log(data);
    const users = data; // users 배열 데이터
    const liEls = users.map((user) => {
      const liEl = document.createElement('li');
      liEl.textContent = user.name;
      liEl.dataset.photo = user.photo?.url || 'https://via.placeholder.com/150'; // 기본 이미지 주소
      if (!user.photo) {
        liEl.classList.add('no-photo');
      }
      const loaderEl = document.createElement('div');
      loaderEl.classList.add('loader');
      liEl.prepend(loaderEl); // 이름 앞에 로더 추가
      return liEl;
    });

    loaderEl.remove(); // 최상단 로더 제거
    ulEl.append(...liEls); // li 요소 추가

    // 각 사용자의 이미지를 비동기로 로드
    liEls.forEach(async (liEl) => {
      try {
        const imgEl = await loadImage(liEl.dataset.photo);
        liEl.prepend(imgEl); // 이미지 추가
      } catch (error) {
        console.error(error);
      } finally {
        const loader = liEl.querySelector('.loader');
        if (loader) loader.remove(); // 로더 제거
      }
    });
  } catch (error) {
    console.error(error);
    ulEl.textContent='사용자 정보를 찾을 수 없어요'
    loaderEl.remove()
  }
});

// 이미지 로드 함수
function loadImage(src) {
  return new Promise((resolve, reject) => {
    const imgEl = document.createElement('img');
    imgEl.src = src;
    imgEl.addEventListener('load', () => {
      resolve(imgEl);
    });
    imgEl.addEventListener('error', () => {
      reject(new Error(`Failed to load image: ${src}`)); 
    });
  });
}

Promise 작성 시에는  약속을 이행하지 못할 수 있을 때 reject를 추가해야 합니다.

이미지 주소가 잘못되어 있을 때

 

매개변수

resolve  - 약속을 이행하는 함수(정상 처리)

reject - 약속을 거부하는 함수 (에러 상황)

 

 

Pending :  약속이 이행되거나 거부되기 전 상태 (대기중)

Fulfilled - 약속이 이행된 상태

Rejected - 약속이 거부된 상태

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const imgEl = document.createElement('img');
    imgEl.src = src;
    imgEl.addEventListener('load', () => {
      resolve(imgEl);
    });
    imgEl.addEventListener('error', () => {
      reject(new Error(`Failed to load image: ${src}`)); 
    });
  });

 

 

then

.then( 매개변수 =>{

 약속이 이행되었을 때 호출

})

.catch( error => {

 약속이 거부되었을 때 호출

})

finally() =>{

 이행 및 거부와 상관없이 항상 호출하는 메소드 제공 

}

 

try catch문 

try{

 에러(예외)가 발생할 수 있는 코드의 실행을 시도 

}

catch{ 

 에러가 발생하면 시도를 종료해 에러를 잡아낸다.

}

finally(erro){

 에러 여부와 상관없이 항상 실행하는 토드를 정의

}