습관적으로 쓰는 async/await의 기초

비동기 키워드 알아보기

아래 코드는 정상적으로 Hello를 출력한다. hello 함수 앞에 async를 붙이면 어떤 결과가 나올까?

function hello() { 
	return "Hello" 
};
hello(); 
// 결과 : Hello

간단히 브라우저 콘솔창에서 실행해보면 아래와 같은 결과를 볼 수 있다. 고로 async 기능의 특징 중 하나로 async 키워드를 사용하면 Promise 객체가 반환된다는 걸 알 수 있다. 그럼 이렇게 되는 경우, 첫번째 코드처럼 "Hello"를 찍히게 하려면 어떻게 해야할까

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

아래와 같이 Promise의 결과를 then을 통해 가져올 수 있다.

async function hello() { 
	return "Hello" 
};
hello().then((value) => console.log(value))

 

전형적인 비동기 처리 코드 보기

비동기 처리를 하지 않는다면 함수 asyncCall를 호출했을 때 'calling'과 result가 거의 동시에 콘솔에 찍히는 걸 확인할 수 있을 것이다.

하지만 여기서 함수 resolveAfter2Seconds는 결과가 나오기까지 2초가 걸리는 함수이고, await는 이 함수의 결과가 나올 때까지 기다리기 때문에 'calling'이 찍힌 후 2초뒤에 result가 찍히는 걸 확인할 수 있다.

await 은 말 그대로 프로미스가 처리될 때까지 함수 실행을 기다리게 만들고 프로미스가 처리되면 그 결과와 함께 실행이 재개된다. await 은 반드시 async 와 같이 사용되고 그렇지 않으면 syntax error가 난다.

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

 

• 출처 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Async_await#rewriting_promise_code_with_asyncawait