async & await

목차

• 예시) 동기적 처리
• Promise를 사용해서 동기적 처리를 비동기 처리처럼 보이게
• async로 비동기 처리
• await
• 체이닝 지옥
• 병렬 처리

---

 예시) 동기적 처리

function dealy() {
    const delayTime = Date.now() + 2000;
    while( Date.now() < delayTime ) {}
    console.log( "B" );
}

console.log( "A" );
dealy();
console.log( "C" );

---

 

 Promise를 사용해서 동기적 처리를 비동기 처리처럼 보이게

function dealy2() {
    return new Promise(( resolve ) => {
        const delayTime = Date.now() + 2000;
        while( Date.now() < delayTime ) {}
        resolve( "B" );
    });
}

console.log( "A" );
dealy2()
.then( str => console.log( str ) );
console.log( "C" );

---

 

 async로 비동기 처리

async function dealy3() {
    const delayTime = Date.now() + 2000;
    while( Date.now() < delayTime ) {}
    return "B";
}

console.log( "A" );
dealy3()
.then( str => console.log( str ) );
console.log( "C" );

---

 

 await

async가 붙은 함수 내에서만 사용 가능

 

function myDelay( ms ) {
    // return new Promise( resolve => setTimeout( resolve, ms ) );
    setTimeout(( () => {} ), ms );
}

function getA() {
    myDelay( 1000 );
    return "A";
}

function getB() {
    myDelay( 2000 );
    return "B";
}

getA()
.then( strA => console.log( strA ) );
getB()
.then( strB => console.log( strB ) );

---

 

 체이닝 지옥

promise도 체이닝이 많아지면 콜백지옥과 비슷해

"A : B" 형식으로 출력하기

function myDelay( ms ) {
    return new Promise( resolve => setTimeout( resolve, ms ) );
}

async function getA() {
    await myDelay( 1000 );
    return "A";
}

async function getB() {
    await myDelay( 2000 );
    return "B";
}

// pormise 방식으로 출력 --------------------------------------
function getAll1(){
    getA()
    .then( strA => 
        getB()
            .then( strB => console.log(`${strA} : ${strB}`))
    );
}

getAll1();

// async를 이용할 경우 ----------------------------------------
async function getAll2() {
    const strA = await getA();
    const strB = await getB();

    console.log( `${strA} : ${strB}` );
}

getAll2();

---

 

 병렬 처리

getA( 1초 ) + getB( 2초 ) = 3초가 소요될 처리를 동시에 실행시켜

getA( 1초 ) + getB( 2초 ) = 2초가 걸리게함

function myDelay( ms ) {
    return new Promise( resolve => setTimeout( resolve, ms ) );
}

async function getA() {
    await myDelay( 1000 );
    return "A";
}

async function getB() {
    await myDelay( 2000 );
    return "B";
}

async function getAll3() {
    Promise.all([ getA(), getB() ])
    .then( all => console.log( all.join( " : " ) ) );
}

getAll3();

 

// 복수의 Promise객체 중 먼저 완료 된 객체만 이용 : Promise.race() 메소드
async function getAll() {
	return Promise.race([ getA(), getB() ]);
}
getAll().then( console.log );

---

 

Github

Link