async & await

async

: function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환하는 비동기 처리 함수가 됨

function hello(){
  return 'hello';
}

async function helloAsync(){
  return 'hello async!';
}

console.log(hello());  // hello
console.log(helloAsync());  // Promise {<pending>}

// Promise를 반환하기 때문에, .then()을 사용하여 결과값을 받아볼 수 있음
helloAsync().then((res)=>{
  console.log(`결과 : ${res}`);
});  // 결과 : hello async! 

• async 키워드를 붙여준 함수의 return 값은 비동기 작업 객체 Promise의 resolve의 결과값임
• async 키워드를 함수 앞에 추가하여 결과를 return하면, Promise를 return하면서 resolve를 해당 결과값으로 수행한 것과 똑같은 효과임

---

• error 인 경우, catch로 err값 받기 가능

async function getName(){
  throw new Error('err...');
}

getName().then((res)=>{
  console.log(`성공 : ${res}`);
}).catch((err)=>{
  console.log(`실패 : ${err}`);
});

// 실패 : Error: err... 

• return 시 resolve / throw 시 reject

await

: 프로미스가 처리될 때까지 함수 실행을 기다리게 만들고, 프로미스가 처리되면 그 결과와 함께 실행함.

• await 키워드는 async 키워드가 있는 함수 내에서만 사용 가능

• 자바스크립트는 await 키워드를 만나면 프로미스가 처리될 때까지 기다림

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 2000);
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림
  console.log(result); // "완료!"
}

f();

• ms를 받아서 해당 시간만큼 대기했다가 종료되는 비동기 함수

// ms는 받아서 해당 시간만큼 대기했다가 종료되는 비동기 함수
function delay(ms) {
  return new Promise((resolve) => {
    // 딱히 실패가 없기때문에 reject는 사용하지 않음
    // setTimeout(()=>{
    //   resolve();
    // }, 3000);
    // setTimeout 내 콜백함수 안에 resolve를 호출하는게 다면, callback함수 자체를 resolve로 전달하는 것도 가능
    setTimeout(resolve, ms);
  });
}

async function helloAsync() {
  return delay(3000).then(() => {
    return "hello async";
  });
}

helloAsync().then((res) => {
  console.log(`결과 : ${res}`);
});

1. delay 함수 내에서 new Promise((resolve)=>{setTimeout(resolve, ms)})는 while(true) 와 같이 성공했다는 신호를 보내는 역할임.
2. delay() 함수가 실행되면 new Promise(()=>{setTimeout( ,ms)})가 반환됨
3. helloAsync() 함수 내에서 delay(3000)은 그냥 3초를 기다리는 함수임.
4. helloAsync()가 실행되면 그냥 3초를 기다린 후 그 결과값으로 hello async를 리턴하는것임
5. helloAsync()의 결과를 .then메소드에서 res로 받아서 출력해 주는 것임

• await를 이용하여 코드 줄이기

/*
async function helloAsync() {
  return delay(3000).then(() => {
    return "hello async";
  });
}
*/

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

• await 키워드를 비동기함수 호출 앞에 추가하면 비동기함수가 동기적인 함수처럼 작동하게됨
• await 키워드가 붙은 함수의 호출은 뒤 함수가 끝나기 전까지 아래 코드를 수행하지 않는다. ( = await 줄은 동기적으로 수행됨.)

• main함수 안에서 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();

await 장점

• 프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않음