🎃 async

✔ async 키워드는 함수에 붙여 Promise를 반환하는 기능을 가진다.
(promise를 더 쉽게 이용할 수 있게 만드는 키워드이다.)
✔ async를 함수 앞에 붙여주면, 자동적으로 함수는 Promise를 리턴하게 되는 함수가 되어 비동기 처리 함수가 된다.
✔ async는 then을 사용할 수도 있다.

function hello() {
  return "hello";
}

async function helloAsync() {
  return "Hello Async";
}
//promise 객체를 출력하게 되면 그냥 promise가 나온다.
// async를 함수 앞에 붙여주면 그 함수를 promise를 출력하는 비동기 처리 함수가 된다. 

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

//**async 키워드를 가지고 있는 함수는 then을 이용할 수 있다.**
helloAsync().then((res) => {
  console.log(res);
}); //Hello Async

//async키워드를 붙인 함수의 리턴값("Hello Async")은 비동기 작업 객체의 Promise에
//resolve(해결)값이 되어 then의 콜백함수의 인자로 들어올 수 있다.

//따라서 Hello Async는 helloAsync()함수의 리턴값이자 비동기 처리의 resolve값이다.

예시 1 -async이용

//**delay함수는 ms를 받아서 밀리세컨드만큼 대기했다가 끝나는 비동기 함수이다. **
function delay(ms) {
  return new Promise((resolve) => {
    // 이 함수는 실패가 없기 때문에 resolve만 있고 reject가 없다. 
    setTimeout(resolve, ms);
    // **원래는 **
    //setTimeout(()=> {resolve()},ms) 이렇게 작성해줘야 하지만
    // setTimeout에 resolve만 존재한다면 콜백함수 자체를 resolve로 전달해줘도 된다. 
  });
}


//*delay 함수가 3초를 대기하고 다 대기하면 "Hello Async"를 리턴한다.
async function helloAsync() {
  return delay(3000).then(() => {
    return "Hello Async";
  });
}


// helloAsync 앞에 async가 붙어서 promise를 반환하기에 then 메서드를 사용한다.
helloAsync().then((res) => {
  console.log(res);
});

🎃 await

예시2 - await이용

위의 예시 1의 코드를 await로 좀 간추릴 수 있다.

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

async function helloAsync() {
  await delay(3000);
  // await를 비동기함수 앞에 붙이게 되면 그 함수는 동기함수처럼 사용된다.
  //await키워드가 붙은 함수는 그 함수가 실행이 끝나기 전까지 
  //그 아래의 코드(return "hello Async")를 실행시키지 않는다.
  return "hello Async";
}

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

✔ await를 비동기함수 앞에 붙이게 되면 그 함수는 동기함수처럼 사용된다.
✔ await키워드가 붙은 함수는 그 함수가 실행이 끝나기 전까지 그 아래의 코드를 실행시키지 않는다.
✔ 동기적으로 사용하는 것처럼 작동하며, await는 async 키워드가 붙은 함수 안에서만 사용이 가능하다.

예시3-main()함수에 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();//main함수 호출

//비동기 코드 Promise를 반환하는 코드를 동기적인 함수로 호출하는 함수로 만들 수 있다.