[JS] 비동기 프로그래밍 #2 Promise

Promise는 비동기 처리에 사용되는 자바스크립트 객체이다.

 

비동기 작업의 성공과 실패를 나타내준다.

 

비동기작업이

성공한다면? Promise의 결과물 안에 결과값이 들어가게 된다.

실패단다면? Promise의 결과물 안에 작업중 발생한 에러가 들어가게 된다.

 

 

promise = {state: 상태 Result: 결과물}

 

1. Promise 객체 생성

Promise의 state 종류 3가지

1. Pending 대기

- result: undefined

2. Fulfilled 성공

- result: 결과값

3. Rejected 실패

- result: 에러

 

아래 코드처럼 Promise 생성 시 생성자 안에 resolve와 reject라는 매개변수를 가진 콜백함수(=executor)를 넣게 된다.

 const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
          const data = { name: '철수' };
          if (data) {
            console.log('네트워크 요청 성공');
            resolve(data);
          } else {
            reject(new Error('네트워크 문제!'));
          }
        }, 1000);
      });

 

1. resolve는 비동기 작업이 완료되었다고 알려주는 함수.

2. reject는 비동기 작업이 실패했음을 알려주는 함수

 

 

2. Promise를 활용한 비동기 함수 활용

비동기 함수로 반환된 promise를 활용하여 비동기 작업의 성공과 실패를 처리한다.

 

1. then

비동기 작업 완료 후 promise의 state가 fullfilled가 된다면 then 안에 있는 콜백함수가 호출된다. 이 콜백함수가 매개변수를 전달받는데 그 매개변수는 promise의 result값을 담고 있다.

 

2. catch

에러에 대한 후처리를 하기 위해 catch를 사용한다. 이 catch도 콜백함수를 하나 전달받는다.

 

3. finally

promise의 성공 여부와 상관 없이 마지막에 실행된다.

 

 

3. promise chaining

여러개의 비동기함수를 순차적으로 수행해야 할 때 사용 가능

 

then에서 어떤 값을 return하고 다시 then으로 받아주면

return한 값이 then의 매개변수로 들어가는 것을 볼 수 있다.

 

위처럼 순차적으로 수행되는 것을 볼 수 있다. => Promise를 통해 콜백지옥(콜백함수의 중첩)을 해결할 수 있음!

 

비동기 요청이 순차적으로 일어나야 하는 경우에 콜백함수를 사용한다면 콜백지옥이 발생한다.

하지만 Promise가 있다면 위 코드처럼 promise chaining을 이용하여 보다 가독성이 좋게 코드를 작성할 수 있다.

 

 

지금까지 Axios를 사용하면서 then, catch를 계속해서 사용해왔는데 Promise에 대해서 잘 알지 못하고 썼던 것 같다. 

 

이제 Promise가 왜 쓰이는지, 어떤 식으로 반환되는지에 대해 학습하여 

then과 catch뿐 아니라 finally를 효율적으로 쓸 수 있을 것 같다.

 

* Promise Chaining을 활용해 콜백지옥을 해결할 수 있다.

 

 

 

 

 

 

 

공부 자료

https://www.youtube.com/watch?v=mYHVOTxEwlY&list=PLZ5oZ2KmQEYiGLIDlsTQR_wdfCH9ZD6lx&index=8