[WEB] Promise & Async/Await

CallBack Hell : 기능에는 문제가 없지만 코드의 가독성 저하

Promise

Prototype

• PromiseState : Status
• PromiseResult : Value

Status

• 대기(Pending) : 이행하거나 거부되지 않은 초기 상태
• 이행(Fulfill) : 연산이 성공적으로 완료된 상태(=resolve)
• 거부(Rejected) : 연산이 실패한 상태(=reject)

new Promise(resolve, reject) => {
  try {
    const data = /* do task */;
    resolve(data) // if success
  } catch(e) {
    reject(new Error(e)) // if error
  }
})

Methods

• .then() : resolve 상태일 때 호출
• .catch() : reject 상태일 때 호출
• .finally() : 무조건 호출

Process

vs CallBack

• CallBack
  
• Promise
  

Async / Await

async와 await 키워드를 통해 promise를 반환하는 비동기 함수를 생성 가능

Process

1. 'Before function!'이 출력된 후 myFunc()이 실행
   

2. one 함수가 호출되고 Promise에서 resolve를 반환된 후 await 키워드를 만나 async함수가 일시 중지 된 후 Call Stack에서 Microtask Queue로 전달
   

3. async 함수에서 나와 나머지 코드를 계속 실행
   

4. 남은 작업이 없는 것을 확인 후 event loop에서 대기 중인 queue를 확인하여 Call Stack에서 중단 된 위치에서부터 계속 실행
   

출처: JavaScript Visualized: Promises & Async/Await, https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke