JavaScript (20) # async, await 응용

👉 우선 먼저 async, await를 알아보자..

📍 promise => async, await (resolved)

promise에서 사용했던 예제를 async, await로 바꿔서 사용해보자

const order1 = () => {
	return new Promise((res, rej) => {
    	setTimeout(() => {
        	res("1번 주문 끝남여!")
        }, 1000);
    })
};

const order2 = (message) => {
  	console.log(message);
	return new Promise((res, rej) => {
    	setTimeout(() => {
        	res("2번 주문 끝남여!")
        }, 3000);
    })
};

const order3 = (message) => {
  	console.log(message);
	return new Promise((res, rej) => {
    	setTimeout(() => {
        	res("3번 주문 끝남여!")
        }, 2000);
    })
};

// promise를 이용해서 만들었던 기존의 코드
// order1()
// .then((res) => order2(res))
// .then((res) => order3(res))
// .then((res) => console.log(res))
// .catch(console.log)

// aync, awiat을 이용한 코드
console.log("시작");
async function order(){
	const result1 = await order1();
  	const result2 = await order1(result1);
  	const result3 = await order1(result2);
  	console.log(result3);
  	console.log("종료");
}
oder();

.
.
.

// 출력결과
// "시작"
// "1번 주문 끝남여!"
// "2번 주문 끝남여!"
// "3번 주문 끝남여!"
// "종료"

선언한 result 변수들에 데이터가 기다렸다가(await) 들어가는(async: 동시에 일어나지 않는다는 약속) 것이 코드상에서 확실히 promise보다 가독성 측면에서도 명확하게 보인다.

📍 promise => async, await (rejected)

그리고 rejected 상황에서 promise는 .catch 를 사용했지만, async, await 함수에서는 try , catch 문으로 감싸주면 된다.

console.log("시작");
async function order () {
  	try {
      const result1 = await order1();
  	  const result2 = await order1(result1);
  	  const result3 = await order1(result2);
  	  console.log(result3);
    } catch (error) {
      console.log(error)
    }
  	console.log("종료");
}
oder();

try{} 안에 코드를 실행하고 만약에 에러가 발생 한다면, 작업을 멈추고 catch{} 부분의 코드를 실행한다.

Promise.all

async, await 함수 내부에서도 비동기 함수를 병렬로 실행할 수 있다.

await 오른편에는 promise가 오기 때문에 promise.all을 사용해서 비동기 함수를 병렬로 실행해보았다.

console.log("시작");
async function order () {
  	try {
      const result = await Promsie.all([order1(), order2(), order3()]);
  	  console.log(result);
    } catch (error) {
      console.log(error)
    }
  	console.log("종료");
}
oder();

.
.

// 출력결과
// ["1번 주문 끝남여!", "2번 주문 끝남여!", "3번 주문 끝남여!"]