async / await 직관적인 비동기 처리

전에 썻던 비동기처리를 도와주는 객체 Promise를 포스팅했고,
이번엔 Promise를 더 쉽고 가독성 좋게 작성할 수 있는 async와 await을 살펴보자.

처음 알아볼건 async

async또한 Promise처럼 비동기를 다루는 기능이자 Promise를 더 쉽게 도와주는 친구임.

async부터 알아보기위해 코드작성을 해보자.

function hello(){
  return 'hello'
}

async function helloAsync(){
  return 'hello Async'
}

console.log(hello());
console.log(helloAsync());

위 코드를 출력해보면 ,

위의 hello는 그냥 잘 출력이되고 아래 async로 만든 helloAsync함수는 Promise pending상태인걸 볼수있다.

그래서 아래 helloAsync에서는 Promise를 return하고있다. 라고 알수있다.
그래서 아래 콘솔에 출력값이 Promise가 되는것.

그래서 async를 함수에 붙여주게되면 함수는 자동적으로 Promise를 return하는 비동기 처리 함수가 된다.

Promise로 출력이 되는걸 확인을했으니 async로 만든 함수는 then을 사용할 수 있다 라는걸 알 수 있다.

async function helloAsync(){
	return 'hello Async'
}

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

함수 안에 작성한 'hello Async' 가 res로 전달이되고 콘솔에출력이 된걸 확인할 수 있다.

async를 붙여준 함수안에 리턴값은 비동기 작업 객체 Promise에 resolve의 결과값이 된다.

await 알아보기

await을 알아보기위해 일단 코드를 또 새로 적어두고 작성하겠다.

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

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

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

위 코드를 출력해보면 3초 뒤 hello Async가 콘솔창에 출력되는걸 볼 수 있다.

그런데 helloAsync함수 안에 delay를 사용할때 코드가 복잡하다 느낄때 await을 이용할 수 있다.

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

async function helloAsync(){
	await delay(3000);
    return 'hello async';
}

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

일단 await은 async가 붙어있는 함수내에서만 사용을할 수 있고 await을 비동기함수 앞에 붙이게되면 비동기함수가 동기적인함수처럼 작동을 하게됨.

그러니 await가 붙은 함수의 호출은 동기적인것처럼 순차적으로 불러오게됨
위의 코드는 delay가 끝나면 그 아래 hello async가 호출되는것,

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

async function helloAsync(){
	await delay(3000);
    return 'hello async';
}

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

main 함수 안에서 await을 사용해서 helloAsync 호출하는 코드이다.

이렇게 async와 await를 통해서 비동기코드 Promise를 반환하는 함수를
동기적인 함수호출하는것 처럼 만드는걸 알아보았다.