promise rejected 상태 이해하기

promise는 세가지의 상태를 가질 수 있다. (반복학습!)

pending : 기다리고 있는 상태 / fulfilled : 작업이 성공적으로 완료된 상태 / rejected : 작업이 실패한 상태

export async function printEmployees() {
  try {
    const response = await fetch('https://learn.codeit.krㄱㄱㄱㄱ/api/employees');
    const data = await response.json();
    console.log(data); 
  } catch (error) {
    console.log('Error!');
    return; 
  } finally {
    console.log('Finished');
  }
};

비동기 코드를 실행하는 동안 오류가 나면 promise는 rejected 상태가 되고, 발생한 오류를 결과값으로 갖게 된다. 그리고 promise 앞에 await이 있을 때는 promise의 결과값인 오류를 throw 해준다. try문 안에서 오류가 throw(던지다라는 의미)됐기 때문에 오류를 잡아서 처리했던 것이다.

코드 흐름 살펴보기

1. 메인 파일을 실행한다고 했을 때 일단 printEmployees 함수를 import하고 printEmployees 함수를 실행(main 파일의 3번째줄)해서
2. 안에 있는 fetch를 실행(asyncFunction 파일의 try문 안에 fetch)한다.
3. fetch는 promise를 리턴하는데 앞에 await이 있기 때문에 결과를 기다리는 동안 함수 밖으로 나가서(main 파일로 이동) 이후 작업(main 파일 5, 7번째 줄)을 실행한다.
4. 그럼 이제 비동기 작업은 성공하거나 실패를 할텐데 성공하면 promise 상태는 fulfilled 상태로 바뀌고 비동기 작업의 성공 결과값을 갖게 된다. 실패를 하면 promise는 rejected상태로 바뀌고 비동기 작업에서 발생한 오류를 결과값으로 갖게 된다. 어쨌든 promise가 pending에서 fulfilled나 rejected 상태가 되면 다시 함수 안으로 돌아와서 코드를 실행(main 파일에서 asyncFunction 파일 3번째줄 로 다시 이동한 후 코드를 실행)한다.
5. fulfilled 상태면 promise의 값을 꺼내서 리턴해주고, 지금처럼 rejected 상태면 promise의 값을 throw 한다. 이 코드는 try 문으로 감싸져 있기 때문에 안에서 오류를 throw해도 잡아서 처리를 해준다.
6. catch문 안에서 리턴을 해도 finally에 이는 코드를 실행하고 함수가 종료된다.

Task 2
Task 3
Error!
Finished

promise와 await의 원리 덕분에 비동기 코드를 익숙한 동기 형태로 작성할 수 있다. 비동기 작업의 결과값을 변수에 할당해서 다음 줄에서 활용하고 오류가 발생할 것을 대비해 try catch문으로 감싸주면 익숙하게 비동기 코드를 작성 할 수 있다. (단, 비동기 코드가 실행되는 순서를 조금 신경 써주어야 한다.)