TIL 230125 - 187번

async & await

async

promise 처럼 비동기를 다루는 기능이자 promise를 더 쉽게 이용할 수 있게 한다.

function hello(){
  return "hello";
}

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

console.log(hello()); // hello
console.log(helloAsync()); // ▶Promise{<pending>}
// promise 객체를 그냥 출력하면 그냥 promise 객체 그대로 출력된다. 

이렇듯 async를 붙이게 될 경우 promise객체를 반환하게 되는데 그렇다면 console.log가 아니라 then을 써볼 수 있다.

function hello(){
  return "hello";
}

async function helloAsync(){
  return "hello Async";
}
//async를 붙인 함수의 return 값은 promise의 resolve의 값이 된다

helloAsync().then((res)=>{console.log(res);})
// hello Async 란 문자가 res로 전달되고 콘솔로 출력

await

바로 예제로 보자

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

async function helloAsync(){
  return delay(3000).then(()=>{
    return "hello Async"
  });
}
helloAsync().then((res)=>{console.log(res);})
// hello Async

딜레이를 이용한 함수인데 awit를 이용해보자

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

async function helloAsync(){
  await delay(3000);
  return "hello async";
}
helloAsync().then((res)=>{console.log(res);})
// hello async

await란 키워드를 비동기의 호출 앞에 붙이게 되면 비동기가 마치 동기처럼 작동을 하게 된다.

즉, await키워드가 붙은 함수의 호출은 뒤에 있는 함수가 끝나기 전까지 그 아래 있는 코드를 수행하지 않는다는 것~
그리고 await키워드는 async가 붙은 함수 내에서만 쓸 수 있다.

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

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

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

// hello async