async, await

참고: https://www.youtube.com/watch?v=Uh8u20MD978&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=17

 

async, await 를 사용하면 promise의 then메서드를 체인형식으로 사용하는 것보다 가독성이 좋아짐. 기본적으로 함수선언문 앞에 async를 붙여주면 promise를 반환함(단, 물론 반환값이 없으면 아무것도 반환하지 않음). await 키워드는 반드시 async 함수 안에서만 사용할 수 있음. 일반함수에서 사용하면 에러 발생함. await키워드 다음에는 Promise객체가 옴. 그 Promise가 처리 될때까지 기다림(기다린다는 것은 setTimeout과 같은 딜레이 함수가 종료될때까지 기다린다는 것을 의미).

 async function getName(){
     return "Mike";
 }

 

 

따라서 아래와 같이 async가 붙은 함수를 호출한 후에는 then을 사용할 수 있음(async를 붙여 정의한 함수의 반환형은 promise이므로. 하지만 async가 붙은함수라고 하여 모두 다 반환형이 있는 것은 아님.)

 getName().then((name)=>{
     console.log(name);
 });

만약 아래와 같이 반환값을 Promise.resolve로 하는 함수가 있다면 반환되는 Promise객체와 resolve로 전달된 인자를 그대로 사용함.

 async function getName1(){
     return Promise.resolve("Oliver");
 }

 getName1().then((name)=>
     {console.log(name)});

그리고 만약 함수 안에서 아래와 같이 예외가 발생하면 reject상태의 Promise객체가 반환됨. 

 async function getName1(){
     throw new Error("Aweful error");
 }

 getName1().then((name)=>
 {console.log(name)}).catch((err)=>{
         console.log(err);
     });

await 키워드는 반드시 async 함수 안에서만 사용할 수 있음. 일반함수에서 사용하면 에러 발생함.
await키워드 다음에는 Promise객체가 옴. 그 Promise가 처리 될때까지 기다림. 그래서 이름이 await임(async 다음에는 함수 정의가 오고 await다음에는 Promise객체가 온다. await는 async안에서만 쓰일 수 있다)

 

 function generateName(name){
     return new Promise((resolve, reject)=>{
         setTimeout(() => {
             resolve(name);
       }, 3000);
    });
 }
 
/*(아래 함수에서 확인 할 수 있듯이 async가 붙는 함수라고 해서 모두 다 반환값이 있는 것은 아님.
 단 반환값이 있다면 그것은 Promise객체임)
 
 만약 아래 함수에서 await가 없다면 Promise{<pending>}이라는 문구 뜸.
 즉, 아직 계류중이라는 것. 따라서 await키워드의 역할은 변수에 Promise객체를 바로 넘기지 않고
 Promise객체가 모두 처리 될 때까지 잠시 미루는 것이라는 것을 짐작할 수 있다.  */
 
 async function showName(){
     const result= await generateName("Mike");//await다음에는 Promise객체가 옴. 
     //Promise객체가 처리될 때까지 기다림. 그래서 이름이 await임
     console.log(result);
 }

 console.log("Start!!");
 showName();
 
 let pr=(name)=>{
    return new Promise((resolve, reject)=>{
        setTimeout(() => {
            resolve(name);
        }, 3000);
    });
}

 async function showName(){   
    let name= await pr("mike");
    console.log(name);
    /*
    재밌는 것을 발견했다! Promise객체를 반환하는 함수를 다른 함수안에 
    감싸넣고(여기서는 showName) await를 붙여주지 않으면 
    Promise{ <pending>} 이라는 상태가 추가되어 console에 찍힘. (복습. async를 함수
    선언부 앞에 붙였다고 해서 반드시 return값이 있어야 하는 것은 아님)
    하지만 name을 위와 같이 console.log(name)로 바로 반환하지 않고 아래와 같이
    Promise객체를 대상으로 then을 찍어주면 await없이도 정상적으로 찍힘.
    즉, 여기서 알수 있는 것은 then자체가 await의 기능을 갖는다는 것이다. 그리고
    await는 변수에 적절한 값을 넣어 줄수 있도록 
    promise객체가 처리될때까지 기다린다는 것이다.
    */

     name.then((msg)=>console.log(msg));

}

console.log("Strat");
showName();