async, await

async

// async

function hello () {
  return "hello";
}

async function helloAsync() {
  return "hello Async";
}

console.log(hello());
console.log(helloAsync()); //

 

async를 붙여주면 자동적으로 비동기 함수가 된다.

 

이말은 then을 쓸 수 있다는 것인데,

async 붙은 함수의 리턴값은, 비동기 작업 객체 Promise의 resolve의 결과값이 된다.

그러니까 async를 붙이고 그냥 리턴만 해도, promise를 리턴하면서 resolve를 이 return 값으로 수행한 것과 똑같은 결과를 얻는다고 생각하면 된다.

 

 

---

await

 

기다렸다가 끝나는 함수를 만들자

일단 async 응용

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

이건 안에 resolve() 밖에 없으므로,. 축약이 가능하다.

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout((resolve), ms)
  })
}

 

전체 코드

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout((resolve), ms)
  })
}

async function helloAsync() {
  return delay(3000).then(() => { //3초 기다렸다가
    return "hello Async";
  })
}

// then 사용
helloAsync().then((res) => {
  console.log(res);
});

따라서 3초 뒤에 hello Async가 찍힌다.

 

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout((resolve), ms)
  })
}

async function helloAsync() {
  await delay(3000);
  return "hello async";
}

// then 사용
helloAsync().then((res) => {
  console.log(res);
});

await 키워드는 이게 붙은 줄에서만 동기적으로 작동해서 그 줄이 다 끝나기 전에는 다른 작업이 수행되지 않는다는 것과

async 함수 범위 내부에서만 쓸 수 있다는 특징이 있다.

 

이제 마지막으로 main() 함수를 만들어서 3초 기다렸다가 hello async 가 나오게 만들어보자.

// await

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout((resolve), ms)
  })
}

async function helloAsync() {
  await delay(3000);
  return "hello async";
}

async function main() {
  const res = await helloAsync();
  console.log(res);
}
main();

똑같이 3초 후 출력되는 것을 확인할 수 있다.