[javascript] async/await

---

async

async 함수는 항상 promise를 반환

async function f() {
    return 'async example';
}

// 이상없는데 언제 알려줄까? 의 상태
console.log(f()); // Promise {<resolved>:'async example'}

f().then(alert);

// f()와 동일하게 동작
async function f2() {
    return Promise.resolve('async example2');
}

await

promise가 확정된 결과를 반환할 때 까지 대기.

지금은 뭐 없는데ㅋㅋㅋ의 상태

async function f() {
    const promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('done!'), 1000); // 1초 뒤 결과가 확정된다.
    });
    alert(await promise);
}

f(); // 1초 뒤 알림창 팝업

await만 사용시 오류 발생

function notF(){
  const promise = Promise.resolve(1);
  const result = await promise; // Syntax Error
  return result ;
}

async/await 의 여러 표현방법

1. 기본

async function f() {
    await foo(1, 1000);
}

2. 즉시실행

(async function f() {
    await foo(1, 1000);
})();

3. 화살표 함수

const f = async () => {
    await foo(1, 1000);
};

async/await의 잘못된 예제

// 원하는 결과 : 1 2 3
async function f() {
    await foo(1, 2000);
    await foo(2, 500);
    await foo(3, 1000);
}

function foo(num, sec) {
    setTimeout(function() {
        console.log(num);
    }, sec);
}

f(); //실제 결과 : 2 3 1

1 2 3 순서가 되도록 수정

// foo()를 수정함
async function f() {
    await foo(1, 2000);
    await foo(2, 500);
    await foo(3, 1000);
}

function foo(num, sec) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log(num);
            resolve('async는 Promise방식을 사용합니다.');
            // resolve를 써주지 않으면 2 3 1 이 나옴.. why?
        }, sec);
    });
}

f(); //실제 결과 : 1 2 3