async&await

async & await?

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

async?

function hello() {
  return "hello";
}

async를 함수에 붙여주면 함수는 자동적으로 프로미스를 리턴하는 비동기처리 함수가 되는데 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.

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

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

helloAsync() 함수 콘솔을 찍으면 Promise 객체를 반환 → async 함수는 Promise 객체를 반환하는 특징이 있다.

이때 다음 코드를 출력해보면 ‘hello Async’가 정상적으로 콘솔에 출력된다.

promise를 반환한다 = then을 쓸 수가 있다.
async를 붙여준 함수의 리턴값은 비동기작업 객체의 프로미스의 resolve값이 된다.

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

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

await?

1. await 키워드가 붙은 함수의 호출은 뒤에 있는 함수가 끝나기 전까지 아래있는 코드를 수행하지 않는다.
2. await 줄은 동기적으로 수행한다.
3. await 키워드는 async가 붙은 함수내에서만 사용 가능하다.

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

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

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

main();

이때 await 함수는 동기적으로 수행되기 때문에, await에 선언된 구문을 먼저 수행을 해야 return할 수 있는 구조이다.

async-await 구문

async function 함수명() {
  await 비동기_처리_메서드_명();
}