자바스크립트 - async function 과 await

async/await

비동기 함수를 async 함수로 만들기 위하여 function() 앞에 async 키워드를 추가한다. async function() await 키워드가 비동기 코드를 호출할수 있게 해주는 함수이다.

async 함수

async 키워드로 선언된 함수이며 그 await 안에 키워드가 허용된다.async/await 를 사용하면 프로미스 체인을 명시적으로 구성할 필요없이 비동기식 약속 기반 동작을 보다 깔끔한 스타일로 작성할 수 있다.

// Promise 객체를 리턴하는 함수

function p(ms) {
   return new Promise((resolve, reject) => {
       setTimeout(() => {
           resolve(ms);
       }, 1000)
   })
}


// Promise 객체를 이용해서 비동기 로직을 수행할 때

p(1000).then(ms => {
   console.log(`${ms} ms 후에 실행된다.`);
});


//Promise 객체를 리턴하는 함수를 await로 호출하는 방법

const ms = await p(1000);
console.log(`${ms} ms 후에 실행된다.`);//오류 발생 
//SyntaxError: await is only valid in async functions and the top level bodies of modules  

await를 사용하는경우, 항상 async함수 안에서 사용되어야 한다.

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

async function main() {
   const ms = await p(1000);
   console.log(`${ms} ms 후에 실행된다.`);
}

main();

• 만약 Promise객체가 rejected 된 경우는 try catch를 이용한다.

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            /*  resolve(ms); */
            reject(new Error('무슨무슨이유'))
        }, ms)
    });
}

async function main() {
    try {
        const ms = await p(1000); //해당 프로미스를 시도
    } catch (error) {
        console.log(error); // reject 되면 에러메시지 출력
    }
}

main();

async funciton에서 return 되는 값은 Promise.resolve 함수로 감싸서 리턴된다.

//async function 에서 return 되는 값은 
//Promise.resolve 함수로 감싸서 리턴된다.


function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
            /* reject(new Error('reason')); */
        }, ms);
    });
}

async function asyncP() {
    const ms = await p(1000); //ms 데이터를 ms 변수에 전달 (1000)
    return 'Jeong:' + ms; // 정의한 리턴값에 ms를 더해서 출력된다.
}

async function main() {
    try {
        const name = await asyncP()
        console.log(name)
    } catch (error) {
        console.log(error);
    }
}

main();

asyncP()에서 p()가 실행되기를 기다리고 main()에서는 asyncP()가 실행되기를 기다린 뒤에 결과를 출력한다.

오류의 전파

//error의 전파


function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            /* resolve(ms); */
            reject(new Error('reason'));
        }, ms);
    });
}

async function asyncP() {
    const ms = await p(1000);
    return 'Jeong:' + ms;
}

async function main() {
    try {
        const name = await asyncP()
        console.log(name)
    } catch (error) {
        console.log(error);
    }
}

main();

위 코드를 보면 프로미스 객체p()에서 reject 가 발생해서 aysncP()에도 에러가 발생하고, 그 밑에 정의한 main()에서도 오류가 발생하게 된다.

오류가 발생했음에도 뭔가 실행 되었으면 하는데 그렇게 하려면 어떻게 해야할까?

finally

main() 에 까지 오류가 발생해도 실행되었으면 하는 내용을 finally에 넣어서 실행을 하면 오류가 발생해도 해당 내용을 실행하여 결과를 출력하게 된다.

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            /* resolve(ms); */
            reject(new Error('reason'));
        }, ms);
    });
}

async function asyncP() {
    const ms = await p(1000);
    return 'Jeong:' + ms;
}

async function main() {
    try {
        const name = await asyncP()
        console.log(name)
    } catch (error) {
        console.log(error);
    } finally {
        console.log('end'); // 출력값
    }
}

main();

async/await를 사용해서 promise all,race 구현

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

//Promise

p(1000)
    .then(() => p(1000))
    .then(() => p(1000))
    .then(() => {
        console.log('3000 ms후에 실행');
    });

//async await

(async function main() {
    await p(1000);
    await p(1000);
    await p(1000);
    console.log('3000 ms후에 실행');
})();



//Promise.all

(async function main() {
    const results = await Promise.all([p(1000), p(2000), p(3000)]);
    console.log(results);
})();


// Promise.race

(async function main() {
    const results = await Promise.race([p(1000), p(2000), p(3000)]);
    console.log(results);
})();