[JavaScript] async/await

async 함수

• async와 await는 비동기 코드를 쓰고 Promise를 더 읽기 쉽게 만들어준다.
• async는 function 앞에 위치한다.

아래와 같이 사용한다.

async function 함수() {
  // logic
}

화살표 함수를 사용하면 아래와 같이 사용할 수도 있다.

const 변수 = async () => {
  // logic
}

 

function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환한다.

아래 코드를 실행하면 'Promise { 'Hello' }'를 반환

async function hello() {
  return "Hello";
}

console.log(hello());

반환된 값을 사용하기 위해서는 .then()을 사용해야한다.

async function hello() {
  return "Hello";
}

hello().then((hello) => console.log(hello));
// 혹은
hello().then(console.log);

// 결과: Hello

 

await

• await는 async 함수 안에서만 동작한다. (async 함수가 아닌데 await를 사용하면 문법에러 발생)
• '변수 = await 프로미스' 인 경우에는 프로미스가 resolve된 값이 변수에 저장된다.
• '변수 = await 값' 인 경우 그 값이 변수에 저장된다.

async function hello() {
  const greeting = new Promise((resolve) => {
    resolve("Hello");
  });
  const result = await greeting;
  return result;
}

hello().then(console.log);

// 결과: Hello

 

예외처리

async, await에서 에러처리는 try...catch를 통해 할 수 있다.

async function func() {
  try {
    const result = await 프로미스;
    return result;
  } catch (error) {
    console.error(error);
  }
}