[JS]Promise/async/await : 약속 삼총사

 

Promise : 약속한 내용

 

 

※ 기본형태

let promise = new Promise(function(resolve, reject){     });​

 

익명함수(함수를 변수에 담은 형태) 입니다.

 

• 무슨 약속이었는 지 기억하려면 이름이 붙어야 겠죠.
  그래서 꼭 변수에 담아야 합니다.
  아니면 약속을 해도 실행할 수 없어요.
  
  
• 약속한 걸 실행 성공하면 resolve
  
  
• 실패하면 reject 가 실행됩니다.
  
  

---

 

Promise 구성 상태값 변화

 

 

• Promise의 기본 상태값

  

  
  
  • PromiseState : pending
    
    
  • PromiseResult : undefined
    
    
    
• 성공한 경우

  

  
  
  • PromiseState : fulfilled
    
    
  • PromiseResult에서는 resolve 에 담긴 값이 표기됩니다.
    
    
    
• 실패한 경우

  

  
  
  • PromiseState : rejected
    
    
  • PromiseResult 에는 reject 에 담긴 값이 표기됩니다.
    
    

 

---

 

promise.then().catch().finally()
promise()를 try/catch 문으로 사용하는 방법입니다.

 

 

---

 

async : 약속을 실행

 

※ 기본형태

async function doPromise() {   }​

async는 함수명 앞에 붙습니다.

 

• async는 Promise를 반환합니다.
  
  
• Promise 함수가 아니여도 말이죠.
  
  
  1. 여기 아무 것도 들어있지 않은 async가 붙은 함수가 있습니다.

     

     
     
  2. 이 async 함수를 실행해보면 Promise가 찍힙니다.

     

     
     
  3. 그래서 async만 붙여주면  Promise()함수를 리턴하는 then()함수와 함께 사용 가능합니다.

     

---

 

await : 약속을 기다려

 

await은 async 함수 안에서만 실행 가능합니다

 

• 어떤 약속을 기다리는 지 알아야 겠죠?
  그래서 Promise 변수명 앞에 적습니다.

 

※기본형태

const promiseName = new Promise(function(resolve, reject){ });

async function waitPromise(){
    await promiseName();
}​

 

await은 약속이 실행되고 끝날 때까지 기다려줍니다.

 

resolve의 위치가 중요합니다

 

 

---

 

• 찾다가 Promise를 변수에 담지 않고
  return에 넣어서 함수로 사용하는 걸 보아 만들어보았습니다.
  
  
  1. 이 코드를 보기 불편하니 화살표 함수로 바꿔보면

     

     
     
  2. 이렇게 됩니다.