드림엘리 : Javascript - 13. Async(2) Promise

Promise

• JS에서 비동기(async)를 자동으로 처리할 수 있도록 도와주는 object
• 정해진 장시간의 기능을 수행 후 정상적으로 기능이 수행이 되어졌다면 성공의 메세지와 함께 처리된 결과 값을 전달
• 기능을 수행하다가 예상치 못한 문제 발생한다면 에러 전달

Promise is a Javascript object for asynchronous operation

• JS에 내장되어 있는 object
• async operation을 위해 쓰임
• 비동기적인 것을 수행할 때 callback 함수 대신에 유용하게 쓸 수 있는 object

중요 포인트

• state 상태
  • process가 heavy(무거운)한 operation을 수행하고 있는 중인지 아니면 이 기능 수행이 다 완료가 되어서 성공했는지 실패했는지 이런 상태에 대해서 이해하는 것이 중요하다.
  • 순서 : pending -> fulfilled or rejected
  • pending state : promise가 만들어져서 지정된 operation을 수행 중 일때의 promise 상태
  • fulfilled state : operation을 성공적으로 다 끝내게 됐을 때의 promise 상태
  • rejected state : operation 수행 중 파일을 찾을 수 없거나 네트워크에 문제가 생길 시 promise의 상태
• producer와 consumer의 차이점 : 원하는 data를 prducing(제공)하는 사람(producer)과 제공된 data를 소비하는 사람(consumer) 이 두가지의 차이점(다른 견해)을 잘 이해해야 한다.
  • consumer : 원하는 data를 소비

1. Promise 만들기

Producer

• producer : promise object이다, promise에서 원하는 기능을 수행해서 해당하는 data를 만들어 내는 것이다.
• new Promise((resolve, reject) => {})
• 원하는 기능을 비동기적으로 실행하는 promise 만들기 : promise는 class이기 때문에 new 키워드를 사용해서 object 사용 가능
• new <any>(executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promise<any>
• 보통은 promise {} 안에서 heavy한 일들을 한다 : 네트워크에서 data를 받아오거나 파일에서 무언가 큰 data를 읽어오는 그런 과정은 시간이 꽤 걸리는 데 그런 것들을 동기적(synchronous)으로 처리하게 되면 파일을 읽어오고 네트워크에서 data를 받아오는 동안 그 다음 line의 코드가 실행되지 않기 때문에 시간이 조금 걸리는 일들은 promise를 만들어서 비동기적으로 처리하는 것이 좋다.
• executer 콜백 함수
  • when new Promise is created, the excuter runs automatically
    • Promise를 만드는 순간 executer 콜백함수 바로 실행됨
    • 사용자가 버튼을 눌렀을 때 네트워크 요청을 해야되는 경우라면 사용자가 요구하지도 않았는 데 불필요한 네트워크 통신을 막기 위해서 promise를 만드는 순간 그 안에 전달한 excuter 콜백함수가 바로 실행되는 점을 유의하면서 코드를 작성해야 한다.
  • resolve 콜백함수
    • 성공시 전달
    • 기능을 정상적으로 수행해서 마지막에 총 data 전달
  • reject 콜백함수
    • 실패시 전달
    • 기능을 수행하다가 중간에 문제가 생기면 호출
    • reject는 보통 Error라는 object를 통해서 값을 전달
    • Error
      • new Error()
      • 무언가 Error가 발생했다는 것을 나타내는 object
      • Error라는 class는 js에서 제공하는 object 중 하나
      • 보통 Error object에는 어떤 error가 발생했는 지 이유를 잘 명시해서 작성해야 함
• 예시
• const promise = new Promise((resolve, reject) => { // doing some heavy work(network, files) console.log('doing something...'); setTimeout(() => { resolve('laura'); }, 2000); });

Consumers

• then, catch, finally(최신 추가됨) 콜백함수들을 통해 값을 받아올 수 있다.
• then
  • 성공했을 때 resolve의 값
  • promise operation이 성공적인 케이스 다룸 : 똑같은 promise 리턴
  • promise가 정상적으로 잘 수행되어서 마지막에 최종적으로 resolve라는 callback함수로 전달한 값이 value에 parameter로 전달되어서 사용
  • 값을 바로 전달할 수도 있고 또 다른 비동기인 promise를 전달할 수도 있다.
  • promise객체 들어있는 변수.then((value) => {})
    • value : Promise가 정상적으로 잘 수행이 되어서 마지막으로 resolve 콜백함수에 전달된 data가 value에 들어옴
    • 값이 정상적으로 잘 수행이 된다면 어떤 값(value)를 받아와서 원하는 기능을 수행하는 콜백함수를 전달
• catch
  • 실패했을 때 reject의 값
  • error handling
  • error가 발생했을 때 어떻게 처리할 것인지 콜백 함수를 등록
  • chaining : then은 결국 똑같은 promise를 리턴하기 때문에 그 리턴된 promise의 catch를 실행할 수 있다.
    • ex)

      promise
        .then((value /*laura*/) => {
          console.log(value);
        })
        .catch((error) => {
          console.log(error);
        });

• finally
  • 성공하든 실패하든 상관없이 무조건 마지막에 호출되어지는 것
  • 성공하든 실패하든 상관없이 어떤 기능을 마지막에 사용하고 싶을 때 그때 사용할 수 있음

2. Promise 연결하기

Promise chaining

• 여러가지를 동시에 묶어서 다른 비동기적인 것들을 묶어서 처리할 수 있다.
  • ex)

    fetchNumber
      .then((num) => num * 2)
      .then((num) => num * 3)
      .then((num) => {
        // 다른 서버와 통신
        return new Promise((resolve, reject) => {
          setTimeout(() => resolve(num - 1), 1000);
        });
      })
      .then((num) => console.log(num));

3. Error handling

• promise chaining 했을 때 어떻게 error를 핸들링하는지
• then에서 발생하는 error를 처리하고 싶을 때에는 해당 then 구문의 바로 뒤에 catch 구문 작성해서 바로바로 문제 해결 가능

tips

• callback 함수를 전달할 때 egg => cook(egg) 이렇게 받아오는 value를 다른 함수로 바로 그 value 한가지만 호출하는 경우에는
  생략이 가능하여 cook 이렇게만 작성해도 됨