[javascript] aync & await

aync & await


개념

  • aync
  • promise를 사용하지 않고 함수를 비동기로 만드는 역할을 함
  • return 값은 항상 promise다
  • await
  • async가 붙은 함수의 안에서만 사용 될 수 있음
  • 비동기 함수를 동기적으로 만듬(수행이 완료될 때까지 기다리게 함)
function deley(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

//1.5초를 기다리지 않고 바로 다음 코드를 수행
async function walk(id) {
    deley(1500); 
    return `${id} arrived`;
}

//1초를 기다리고 나서 다음 코드를 수행
async function run(id) {
    await deley(1000); 
    return `${id} arrived`;
}

//먼저 수행된 비동기 함수의 결과 값을 반환
async function doRace(id1, id2) {
    return Promise.race([walk(id1), run(id2)]);    
}

//파라미터로 입력된 모든 비동기 함수가 처리된 후에 그 결과물들을 반환
async function arrive(id1, id2) {
    return Promise.all([walk(id1), run(id2)])
        .then(name => name.join(', '));
}

doRace('woogie', 'umi').then(result => console.log(`race winner: ${result}`));
-> race winner: woogie arrived

//받아오는 값을 바로 파라미터로 사용할 경우 둘 다 생략이 가능하다.
arrive('woogie', 'umi').then(console.log);
-> woogie arrived, umi arrived

links

social