[JavaScript] 콜백 지옥 (3)

async , await

• async
  • 함수의 앞에 붙여 해당 함수가 비동기 함수임을 나타냄
• await
  • 비동기 함수의 실행 결과를 기다리는 키워드
  • async 함수 안에서만 사용 가능
  • 해당 비동기 작업이 완료될 때까지 코드 실행을 일시 중지하고 결과를 기다린 다음, 해당 결과를 반환

 

• 가독성
  • runTaks() 함수를 보면 콜백 지옥, Promise 객체의 then 보다 가독성이 훨씬 좋은 모습을 볼 수 있음

 

// async, awiat 사용하면 좀 더 동기적인 것을 사용하는 느낌으로 사용 가능
// async 백그라운드에서 사용하는 느낌 -> 이 자체가 반환하는 값이 promise객체임
// 내 프로미스에서 동작한 것을 다음 동작에게 넘기는 느낌
// await 뒤에 오는 것들은 Promise 객체에서 resolve된 결과임

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))

async function fastFunction(data) {             // async는 프로세스가 종료되길 기다린다
    await delay(1000);
    return data * 2;
}

async function slowFunction(data) {
    await delay(3000);
    const result = data + 10;
    
    return result;
}

async function normalFunction(data) {
    await delay(2000);
    return data / 2;
}

async function Tasks() {
    const result = await fastFunction(10); 
    console.log(result);                    

    result = await slowFunction(result);
    console.log("task done", result);
}

// fast -> normal -> slow -> fast
async function runTasks() {
    let result = await fastFunction(100);       // awiat 키워드는 async 안에서만 쓸 수 있음
    
    result = await normalFunction(result);
    result = await slowFunction(result);
    result = await fastFunction(result);

    console.log("done", result);                // 값이 들어가있음 (await 이후 실행되기 때문)
}

runTasks()