Do it! 타입스크립트 프로그래밍 - Promise와 async/await 구문

07 Promise와 async/await 구문

07-1 비동기 콜백 함수

• 비동기 콜백 함수(asynchronous callback function) : 비동기 API의 콜백 함수
• 콜백 지옥(callback hell) : 복잡한 형태로 얽힌 콜백 구조

 

 

07-2 Promise 이해하기

• 타입스크립트 Promise의 콜백 함수는 resolve와 reject 함수를 매개변수로 받는 형태
• Promise.resolve 메서드
  • Promise.resolve(값) 형태로 호출하면 항상 이 '값'은 then 메서드에서 얻을 수 있음
    

    01: Promise.resolve(1)
    02:   .then(value => console.log(value))
    03:
    04: Promise.resolve('hello')
    05:   .then(value => console.log(value))
    06:
    07: Promise.resolve([1, 2, 3])
    08:   .then(value => console.log(value))
    09:
    10: Promise.resolve({name: 'Jack', age: 32})
    11:   .then(value => console.log(value))

• Promise.reject 메서드
  • Promise.reject(Error 타입 객체)를 호출하면 이 'Error 타입 객체'는 항상 catch 메서드의 콜백 함수에서 얻을 수 있음
    

    01: Promise.reject(new Error('에러 발생'))
    02:   .catch((err: Error) => console.log('error: ', err.message))

• then-체인(then-chain)
  • Promise의 then 인스턴스 메서드를 호출할 때 사용한 콜백 함수는 값을 반환
  • then에서 반환된 값은 또 다른 then 메서드를 호출해 값을 수신할 수 있음
  • then 메서드는 반환된 값이 Promise 타입이면 이를 해소(resolve)한 값을 반환
    • 만약 거절(reject)당한 값일 때는 catch 메서드에서 이 거절당한 값을 얻을 수 있음
• Promise.all 메서드
  • Promise 객체들을 배열 형태로 받아, 모든 객체를 대상으로 해소(resolve)된 값들의 배열로 만듦
  • Promise 객체를 반환하므로 해소된 값들의 배열은 then 메서드를 호출해서 얻어야 함
  • 배열에 담긴 Promise 객체 중 거절(reject) 객체가 발생하면 더 기다리지 않고 해당 거절 값(reject value)을 담은 Promise.reject 객체를 반환
• Promise.race 메서드
  • 배열에 담긴 Promise 객체 중 하나라도 해소(resolve)되면 이 값을 담은 Promise.resolve 객체를 반환
    • 만약 거절 값이 가장 먼저 발생하면 Promise.reject 객체를 반환

07-3 async와 await 구문

• await 키워드
  • 피연산자(operand)의 값을 반환
  • 만약 피연산자가 Promise 객체이면 then 메서드를 호출해 얻은 값을 반환
• async 함수 수정자
  • await 키워드는 항상 async라는 이름의 함수 수정자(function modifier)가 있는 함수 몸통에서만 사용할 수 있음
  • 일반 함수처럼 사용할 수 있으며 Promise 객체로 사용할 수 있음

출처 : Do it! 타입스크립트 프로그래밍

Do it! 타입스크립트 프로그래밍