[JS] async / await 으로 비동기를 동기처럼 써보자

비동기 방식으로 ( Callback , Promise ) 작성한 기존 프로그램을 await을 통해서 좀더 간결하게 만들 수 있습니다.

정확하게 말해서 비동기식 프로그램을 마치 동기식 프로처럼 만들수 있습니다. 

 

aync / await 사용 방법

• await으로 호출하기 위해서는 async 로 묶은 함수 내부에서만 사용 해야합니다. 
• await 으로 호출하는 함수는 Proimse를 동일하게 반환 해야 하며, 항상 Promise.resolve() 가 반환 됩니다.

console.log('Test Aysnc Call - Promise await')

const a = () => {
    return new Promise ((resolve)=> {   // Promise 객체를 반환하고 resolve를 인자로 받는다.
        setTimeout(()=> {
            console.log('1');
            resolve();                  // console.log(1) 실행이 끝나면 resolve()를 호출
        }, 1000);
    });
}

const b = () => {
    return new Promise ((resolve)=> {   // Promise 객체를 반환하고 resolve를 인자로 받는다.
        setTimeout(()=> {
            console.log('2');
            resolve();                  // console.log(2) 실행이 끝나면 resolve()를 호출
        }, 1000);
    });
}

const c = () => {
    return new Promise ((resolve)=> {   // Promise 객체를 반환하고 resolve를 인자로 받는다.
        setTimeout(()=> {
            console.log('3');
            resolve();                  // console.log(3) 실행이 끝나면 resolve()를 호출
        }, 1000);
    });
}

const d = () => {
    return new Promise ((resolve)=> {   // Promise 객체를 반환하고 resolve를 인자로 받는다.
        setTimeout(()=> {
            console.log('4');           // console.log(4) 실행
        }, 1000);
    });
}

// async / await 

const wrap = async() => {   // async 함수 정의
    await a();              // then() 대신 await을 붙이고 동기처럼 작성
    await b();
    await c();
    await d();
}

wrap ();    // aysnc 함수 실행