(10) Asynchronous JavaScript - Promise와 오류

// asyncFunction.js
export async function printList () {
  try{
    const response = await fetch('https://todo-api.fesp.shopppppppp/api/todolist');
    const data = await response.json()
    console.log(data);
  } catch (error) {
    console.log('에러가 발생했습니다.');
    // console.log(error);
    return;
  } finally {
    console.log('Finished');
  }
}

위 비동기 코드에서 오류가 나면  try문이 오류를 잡아서 catch문이 실행된다고 했을 때

상황을 좀 더 객관적으로 살펴보자.

 

Promise는 3가지 상태를 가질 수 있다고 했다.

기다리고 있는 Pending 상태.

작업이 성공적으로 완료된 Fulfilled 상태.

작업이 실패한 Rejected 상태가 있다고 했다.

 

비동기 코드를 실행하는 동안 오류가 나면 

Promise는 실패한 Rejected 상태가 되고

발생한 오류를 결과값으로 가지게 된다.

 

그리고 Promise 앞에 await이 있을 때는

Promise의 결과값인 오류를 throw (스로우) 해주는데,

축구 경기 할 때 라인 밖에 공을 나가면

손으로 공을 던지는 스로우인(throw-in) 하면 경기가 정상적으로 재개되는 것처럼

try문 안에서 오류가 throw 됐기 때문에 오류를 잡아서 처리했던 것이다.

 

코드의 흐름을 처음부터 살펴보자

메인 파일을 실행했을 경우

printList 함수를 import 하고 printList 함수를 실행해서 안에 있는 fetch를 실행한다.

fetch는 Promise를 return하는데 

앞에 await이 있기 때문에 결과를 기다리는 동안

함수 바깥으로나 가서 이후 작업을 실행한다.

즉 콘솔명령어가 실행되어 Task2, Task3이 출력될 것이다.

 

비동기 작업은 성공을 하거나 실패를 할 건데

만약 성공을 하게되면 Promise는 Fulfilled 상태가 되고

비동기 작업의 성공 결과값을 갖게된다.

반면 실패를 하면 Promise는 Rejected 상태로 바뀌고

비동기 작업에서 발생한 오류를 결과값으로 갖게 된다.

 

Promise가 Fulfilled나 Rejected 상태가 되면

다시 함수 안으로 돌아와서 코드를 실행하는데

Fulfilled 상태면 Promise의 값을 꺼내서 retun 해주고

rejected 상태면 Promise의 값을 throw 한다.

코드는 try문으로 감싸져 있기 때문에 

코드 안에서 오류를 throw해도 잡아서 처리(catch)해 주는 것이다.

catch문 안에서 리턴을 해도 finally에 있는 코드를 실행하고

"에러가 발생 했습니다" 와 "Finished"를 출력하며 함수가 종료된다.

 

이런 Promise와  await의 원리 덕분에 

비동기 코드를 익숙한 동기 형태로 작성할 수 있는 것이다.

비동기 작업의 결과값을 변수에 할당해서 다음 줄에서 활용하고

오류가 발생할 것을 대비해서 try catch문으로 감싸 주는 등...

 

비동기 코드가 실행되는 순서에만 신경 써 준다면

어떤 비동기 프로그램이든 쉽게 만들 수 있을 것이다.