async await 개요

 

async await 를 사용하는 주된 이유는 callback흐름을 숨기는 것이다.
callback을 숨겨 보기 쉽게 하는 것이지 없게 만들지는 않는다.

 

callback을 숨긴다

function Fun1(inv1) {
    return fetch(/*...*/).then(value => {
        //work...
        return value;
    });
}
async function Fun2(inv1) {
    const value = await fetch(/*...*/);
    //work...
    return value;
}

Fun1과 Fun2는 같다.

 

async 사용

function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환한다.

명시적인 Promise반환

async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

암묵적 Promise반환(자동)

async function f() {
  return 1;
}

f().then(alert); // 1

위 2개의 코드는 동일하다.

async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의한다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환한다. async function expression을 사용해서 async function을 선언할 수 있다.

 

 

await 사용

await는 async 함수 안에서만 동작한다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

약1초 뒤 완료가 뜬다.

 

Promise 앞에 await를 사용하면 결과 값이 Promise가 아닌 resolve에 전달된 순수 결과 값이 반환 된다.

let r1: string = await promise_val1;
let r2: string = await func_return_promise();

 

await는 말 그대로 Promise가 처리될 때까지 함수 실행을 기다리게 만든다. Promise가 처리되면 그 결과와 함께 실행이 재개되죠. Promise가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.

async 함수에는 await식이 포함될 수 있다. 이 식은 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환한다.
await 키워드는 async 함수에서만 유효하다. async 함수의 본문 외부에서 사용하면 SyntaxError가 발생한다.

https://ko.javascript.info/async-await

 

기타

async/await함수의 목적은 사용하는 여러 promise의 동작을 동기스럽게 사용할 수 있게 하고, 어떠한 동작을 여러 promise의 그룹에서 간단하게 동작하게 하는 것이다. promise가 구조화된 callback과 유사한 것 처럼 async/await 또한 제네레이터(generator)와 프로미스(promise)를 묶는것과 유사하다.

async await Ex1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

async await Ex2