[Javascript] async와 await

💡 async ? await ?

• ES2017에 도입된 비동기 처리 문법
• Promise 로직을 더 쉽고 간결하게 사용할 수 있게 도와준다.
• Promise를 대체하는 기능은 아니고 보이는 문법을 다르게 하여 가독성을 높히고 유지보수가 편리하게끔 만든 문법

 

 

✔ 사용법

function 키워드 앞에 async  /  비동기 처리 앞에 await 를 붙여 사용한다.

 

1) async

• async를 붙인 함수는 promise를 리턴하는 비동기 함수가 된다.
• async를 붙인 함수의 return 값은 promise의 resolve 함수의 argument와 같다.

 

/* 함수 선언식 */
async function helloAsync() {
	return 'hello Async'
}


/* 함수 표현식 */
const helloAsync2 = async () => {
	return 'hello Async2'
}

 

 

2) await

• await은 비동기 함수 앞에 작성한다.
• await을 작성하면 비동기 함수를 동기처럼 작동하게 할 수 있다. (순차적으로)
• await은 async 함수 내에서만 사용 가능하다.

 

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

main(); // 'hello Async hello Async2'

 

 

 

✔ 예시

앞서 포스팅한 Promise 게시글의 예시를 async await를 사용하여 정리해보자.

 

2024.02.15 - [Frontend/Javascript] - [Javascript] 콜백 지옥 탈출하기 - Promise

[Javascript] 콜백 지옥 탈출하기 - Promise

 

 

1) Promise 방식

function promiseA(a, b) {
	return new Promise((resolve, reject) => {
            setTimeOut(()=>{ resolve(a+b) }, 3000)
        })
}

function promiseB(a) {
	return new Promise((resolve, reject) => {
            setTimeOut(()=>{ resolve(a*2) }, 1000)
        })
}

function promiseC(a) {
	return new Promise((resolve, reject) => {
            setTimeOut(()=>{ resolve(a*-1) }, 2000)
        })
}

promiseA(3,5)
	.then((a_res)=>{
            console.log('A 함수의 결과 값 : ', a_res);
            return promiseB(a_res);
        })
        .then((b_res)=>{
            console.log('B 함수의 결과 값 : ', b_res);
            return promiseC(b_res);
        })
        .then((c_res)=>{
            console.log('C 함수의 결과 값 : ', c_res);
        })

 

 

2) async await 방식

 

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

const asyncA = async (a, b, ms) => {
  await delay(ms);
  return a + b;
};

const asyncB = async (a, ms) => {
  await delay(ms);
  return a * 2;
};

const asyncC = async (a, ms) => {
  await delay(ms);
  return a * -1;
};

async function main() {
  const a_res = await asyncA(3, 5, 3000);
  console.log(a_res);
  const b_res = await asyncB(a_res, 1000);
  console.log(b_res);
  const c_res = await asyncC(b_res, 2000);
  console.log(c_res);
}

main();

 

 

콘솔 찍는 부분을 제외하고 보면 promise로 .then을 열거하는 방식보다 훨씬 가독성이 좋아진 것을 볼 수 있다.