[JavaScript] async & await | 비동기 처리

async & await

자바스크립트의 비동기 처리 패턴으로, 기존의 비동기 처리 방식인 콜백 함수와 Promise의 단점을 보완하는 키워드라고 한다. (아직 Promise도 잘 모르는데..^^)

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

 

 

async

async 키워드를 붙여준 함수의 return 값은 비동기 객체인 Promise의 resolve 값이 된다.

즉, Promise와 동일한 결과값을 얻는다.

 

async function helloAsync(){
	return new Promise(function(resolve, reject){
    	var s = "Hello, Async!";
        resolve(s)
    });
}

async function logSentence(){
	var say = await helloAsync();
    console.log(say); 
}

logSentence();  // "Hello, Async!"

 

 

async를 붙여주면 Promise의 결과값을 return하므로 then도 사용할 수 있다.

async function helloAsync() {
	return "Hello, Async!";
}

helloAsync().then((res)=> {
	console.log(res);
}); // Hello, Async!

 

await

await 키워드를 비동기함수의 호출 앞에 붙이게 되면, 비동기함수가 마치 동기적인 함수처럼 작동하게 된다.

즉, await 키워드가 붙은 함수의 호출은 뒤에 있는 코드가 완료될 때까지 그 아래에 있는 코드를 수행하지 않게 된다.

 

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

async function helloAsync() {
  await delay(3000);	// 동기적으로 사용되기 때문에 3초 후에 hello async 출력됨
  return "hello async";
}

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

async function main() {
	const res = await helloAsync(); // await을 사용하여 비동기처리 함수의 return 값도 받아올 수 O
    console.log(res);
}

main();