async / await

자바스크립트의 비동기를 위한 방법 중 마지막인 async/await에 대해 간단하게 알아보려 한다. 실제적으로 코드를 작성하며 중요하게 작동하는 내용이라 그런지…다른 내용들보다는 조금 어렵게 다가온다. 계속해서 사용해 보면서 어떻게 비동기 작업을 구현하는 게 제일 효율적인지 알아갈 수 있으리라 믿는다. (아직은 부족함이 많은 정리로 남겠지만 지속적으로 업데이트하며 async/await를 글 하나로 정리할 수 있게끔 해보도록 하겠습니다..)

 

 

---

 

 

 ✏️ async와 await를 사용하면 프로미스를 더 편하게 사용가능하다.

 

async

function 앞에 async 키워드를 추가하면 두가지 효과가 있다.

1. 함수는 언제나 Promise를 반환한다.
   1. promise가 아닌 값을 반환하더라도 이행상태의 promise로 값을 감싸 promise가 반환되도록 한다.
   2. 즉, return값이 resolve()값과 같다고 생각하면 된다.
2. 함수 안에서 await를 사용할 수 있다.

 

await

• 비동기로 처리되는 부분에 await를 붙여주면 프로미스가 처리되어 resolve값을 추출해서 리턴하게 뜸하다.
• 자바스크립트는 await를 만나면 promise가 처리될 때까지 기다린다.
• promise가 처리되길 기다리는 동안에 엔진이 다른 일(다른 스크립트 실행, 이벤트 처리등)을 할 수 있기 때문에 CPU 리소스 낭비가 되지 않는다.
• Promise.then보다 세련되게 프로미스의 result 값을 얻을 수 있도록 해주는 문법이다.

 ✏️ 비동기는 Promise객체로 처리하고 async/await는 비동기를 동기식으로 처리하는 기법이다.

 

기존에는 Promise에. then()을 사용하여 동기처리했지만 await를 사용함으로 바로 동기처리를 할 수 있게 되었다.

 

await가 던진 에러는 throw가 던진 에러를 잡을 때처럼 try…catch를 사용해 잡을 수 있다.

앞에서 promise의. then()과 catch()를 사용해서 구현했던 빨래의 작동과정을 async와 await로 구현해 보았다.

(최대의 효율성을 위한 코드작성법이 무엇인지 아직 확 느끼지 못하고 있는 것 같다.)

const delay = async(time) =>{
  await new Promise(resolve =>{
    setTimeout(resolve,time)
  })
}

const runWashingMachine =  async() => {
  console.log("세탁기를 돌리는 중...");
  await delay(3000);
  console.log('세탁기 작업 완료');
};

const runDryer = async () => {
  console.log("건조기를 돌리는 중...");
  await delay(2000)
  console.log("건조기 작업 완료");
};

const doLaundry = async()=>{
try{
	await runWashingMachine();
  await runDryer();
  console.log("빨래 정리 및 접기")
  await delay(1500);
  console.log("빨래정리 작업 완료");
	}catch(err){
	console.log(err);
	}
}

doLaundry();

 

 

마치며

내용을 정리하는 것보다 확실히 실제 코드를 작성하며 효율적인 코드가 무엇인지 생각하며 비동기 코드를 작성하는 게 훨씬 복잡하고 어려웠다. 왜 자바스크립트는 비동기 구현이 중요한지 점점 깨닫게 된다. 동시에 나의 부족함을 더욱더 깨닫게 된다... 아무 생각 없이 async와 await를 사용했던 나날들을 반성해 가며 앞으로는 탄탄한 지식을 바탕으로 좋은 코드들을 작성해 나갈 수 있도록 해야겠다.

 

참조

https://ko.javascript.info/async-await

https://inpa.tistory.com/entry/JS-📚-비동기처리-async-await