Javascript – async & await (with Promise)

by Posted on
async & await (with Promise)

비동기 개발시 , 순차적 비동기 처리를 위해 promise 를 사용하지만  좀 더 간편하게 처리하기 위해 aysnc , await ( with Promise) 에 대해 알아보자

[ async & await = 프로미스 다른점]
– async  로 만들어진 함수는 그안의 처리들을 모두 promise  만든다.
– resolve(value) 콜백은 – return value 로  처리
– reject (new Error()) 은  throw new Error(…); 로 처리 (try ~ catch)

async function  함수명()

{  
      ‘ async 로 지정한 함수안에 코드들은 모두  자동으로 promise 로 감싸진다. ‘

}

[Promise 로 만들어진 비동기 함수]
———————————————————————————————–

function getData()
{   
    return  new Promise( (resolve) =>
    {
        setTimeout(() =>
        {
            resolve(“{1,2,3,4,5}”);
        } , 2000)
    });
}
let gData = getData(); 
console.log(gData);    // 비정상 Promise {<fulfilled>: ‘{1,2,3,4,5}’}
getData().then( data => console.log(data)) // 정상  {1,2,3,4,5} resolve ~ then


[async 로 만들어진 비동기 함수]
———————————————————————————————–

function getData()
{   
    return  new Promise( (resolve) =>
    {
        setTimeout(() =>
        {
            resolve(“{1,2,3,4,5}”);
        } , 2000)
    });
}
(async function(){   // 함수선언과 동시에 실행 await aync 함수안에서만 실행 가능하므로
    let gData3 = await getData();
    console.log(gData3);  // 3초 뒤  정상 출력 {1,2,3,4,5} 
})();

 

[ asycn & await ]

1) 비동기 함수를 호출을 포함할 함수를  async 함수로 지정하고,
2) 비동기 함수를 호출할때 동기화 하기위해 await 를 지정한다.
3) await로 지정한 함수는 비동기 함수로 promise 로 작성되어 있어야 한다.
4) async 함수로 지정해야  await 를 사용할 수 있다.
function delay(s) {
    return new Promise ( (resolve) => {
        setTimeout ( () => {  //  setTimeout (resolve , s * 1000) 같음
            resolve(”);
        } , s*1000 )
     })
}
async function getNumber1()
{
    await delay(1);
    return “No.1”;
}
async function getNumber2()
{
    await delay(1);
    return “No.2”;
}
async function getNumber3()
{
    await delay(1);
    return “No.3”;

}

// 비동기 함수 동시화하여  실행하기 with Promise

function getAllNumberWithPromise()
{
    return getNumber1() // 콜백지옥
            .then( no1 => {                          
                    return getNumber2().then( no2=>
                    {                        
                            return getNumber3().then( no3=>
                            {
                                return   get value from promise ${no1} ${no2} ${no3} `;
                            });
                    })
            })
            .catch(e => e)
}

getAllNumberWithPromise().then(console.log);  // Promise No.1 No.2 No.3

// 비동기 함수 동기화하여  실행하기 with await

async function getAllNumberWithAsync()
{
    let no1 , no2 , no3;
    try{
         no1 = await getNumber1();
         no2 = await getNumber2();
         no3 = await getNumber3();
    }
    catch(e)
    {
        console.log(e);
    }
   return `Async : ${no1} ${no2} ${no3} `;    
}
getAllNumberWithAsync().then(console.log);    // Async : No.1 No.2 No.3 

// 병렬 처리 동시 실행하기

async function getAllNumberParallel()
{
        // no1 , no2 , no3 각 리턴값이 다음 프로세스에 영향이 없으므로, 기다릴필요없음
        // await 로 인해 각1초씩 총 3초 걸림
        /*
            no1 = await getNumber1();   // 1초 await
            no2 = await getNumber2();   // 1초 await
            no3 = await getNumber3();   // 1초 await          
        */
        // no1 , no2 , no3  각 비동기로 기다리지 않으므로 실행하여 promise 객체를 리턴받음        
        // async 함수로 promise 를 리턴함
        //  비동기로 아래,getNumber1() ~ 3  까지 실행하고 동시에 대기하고 promise 객체 리턴
        let no1Promise = getNumber1();
        let no2Promise = getNumber2();
        let no3Promise = getNumber3();

 

// 기다리지 않고 바로 출력하므로,,
        let no1 = await no1Promise;
        let no2 = await no2Promise;
        let no3 = await no3Promise;
 // 기다리지 않고 바로 출력하므로,,
         return `Parallel : ${no1} ${no2} ${no3} `; // Parallel : [object Promise] [object Promise] [object Promise]      
}
getAllNumberParallel().then(console.log) // Parallel : No.1 No.2 No.3

 

// no1 ,no2 ,no3 의 실행 값들이 순서에 따라 서로에게 영향을 미치지 않는다면
// 위 보다 간단하게 병렬처리가 가능하다.

[Promise.All] 

// 병렬처리를 원하는 , 프로미스를 리턴하는 함수를 나열하여 결과를 함수 호출 자리에 배열로 그대로 받음
// all  , resolve , race 모두 static 함수역할을 하므로 new 를 붙이지 않음
// getNumber1() , getNumber2() , getNumber3() 함수들은 promise로 만들지 안았지면 async function 이므로
// 묵시적으로 promise 로 리턴함
용법 : return Promise.all( [  함수1 ,  함수2,  함수3,  함수4,  함수5 ]);
function getAllNumberWithPromiseAll()
{
    return Promise.all([ getNumber1() , getNumber2() , getNumber3()]).then( e => { return e.join(‘ ‘) } )
}

getAllNumberWithPromiseAll().then(console.log) // No.1 No.2 No.3


[Promise.race] 
// 병렬처리하고자 하는 함수들을 나열함 (단, 프로미스를 리턴해야함) 
// 그중 가장 빠른 처리를 끝내는 비동기 함수중  1개를 리턴, 그 리턴된 프로미스를 처리함
용법 : return Promise.race( [  함수1 ,  함수2,  함수3,  함수4,  함수5 ]);

function getAllNumberWithPromiseRace()
{
    return Promise.race( [ getNumber1() , getNumber2() , getNumber3()]);
}
getAllNumberWithPromiseRace().then(console.log) // No.1

 

 

 

Published by pluginn

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다