매일 한줄 코딩

14. javascript async & await ( 직관적인 비 동기 처리 ) 본문

develop/javascript

14. javascript async & await ( 직관적인 비 동기 처리 )

ShipJH 2022. 9. 11. 22:04

1. async

function hello() {
  return "shipjh Hi~";
}

**async** function helloAsync() {
  return "Hi async";
}

console.log(hello()); //shipjh Hi~
console.log(helloAsync()); // Promise {<pending>} 반환

async 를 붙인 함수는 Promise를 반환했다.

그렇다면..

then 을 쓸수있다.

async function helloAsync() {
  return "Hi async"; // resolve의 효과
}

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

💡async 를 사용한 함수는 Promise 를 반환한다.!


2. await

3초후에 실행하려고 하는데 코드가 너무길다.

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

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

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

간단하게 await 을 사용하면 된다.

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

async function helloAsync() {
  await delay(3000); // delay 를 처리된후 return 한다.
  return "Hi async";
}

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

await는 비동기 함수의 호출을 동기적으로 처리하게 된다.

즉 await 를 붙인 함수호출이 있을경우 뒤에있는 것을 실행하지 않고 기다렸다가, 완료되면 처리하게 된다.

await 은 async 함수 내에서만 사용이 가능하다.

Comments