자바스크립트 중급 강좌(async / await)

히대·2023년 12월 18일

Javascript

목록 보기
27/28

async

항상 promise를 반환함

async function getName() {
	return "mike"
}

console.log(getName()); -> promise{<fulfilled>: "mike"}

getName().then((name) => {
	console.log(name); -> mike
});

값이 promise 면?

async function getName() {
	return Promise.resolve("tom")  * 만약 이 값이 promise면
    								 이 반환 값을 그대로 사용 -> tom
}

함수 내부에서 예외가 발생하면

async function getName() {
	throw new Error("err..");
}

getName().catch((err) => {
	console.log(err); -> Error: err.. 출력
})

await

awiat 키워드는 async 함수 내부에서만 사용 가능
일반 함수에서 사용하면 에러가 발생함

function getName(name) {
	return new Promsit((resolve, reject) => {
    setTimeout(() => {
    	resolve(name);
    }, 1000)
    });
}

async function showName(){
	const result = await getName('mike');
    console.log(result);
}

console.log("시작");
showName();

await 키워드 오른쪽에는 promise가 오고 그 promise가 차례 될 때까지 기다립니다.
위 코드는 시작후 1초후에 mike가 찍힘
result에 getName에서 resolve된 값을 기다렸다가 넣어줌

전 promise 영상에서 then 대신에 async await 사용하기

가독성이 좋아짐

const f1 = () => {
	return new Promise((res, rej) => {
    	setTimeout(() => {
        	res("1번 주문 완료");
        }, 1000)
    });
};

const f2 = (message) => {
	console.log(message)
	return new Promise((res, rej) => {
    	setTimeout(() => {
        	res("2번 주문 완료");
        }, 3000)
    });
};

const f3 = (message) => {
	console.log(message)
	return new Promise((res, rej) => {
    	setTimeout(() => {
        	res("3번 주문 완료");
        }, 2000)
    });
};

console.log("시작")
async function order(){
	const result1 = await f1();
    const result2 = await f2(result1);
	const result3 = await f3(result2);
	console.log(result3);
	console.log("종료");
}
order();

결과

만약에 rej가 되면 어떻게 될까?

f2를 rej로 바꾼후 실행 하면

const f2 = (message) => {
	console.log(message)
	return new Promise((res, rej) => {
    	setTimeout(() => {
        	rej(new Error("err.."));
        }, 3000)
    });
};

결과

이 상태에서 멈춤

해결법

try catch문 으로 감싸주기

console.log("시작")
async function order(){
  try{
  	const result1 = await f1();
    const result2 = await f2(result1);
    const result3 = await f3(result2);
    console.log(result3);
  } catch (e) {
  	console.log(e); * try 부분을 시도하고 만약 error가 있으면 이 부분에서 나옴
  }
  console.log("종료")
}
order();

결과

Promise.all 사용
내부에 배열로 작성

const f2 = (message) => {
	console.log(message)
	return new Promise((res, rej) => {
    	setTimeout(() => {
        	res("2번 주문 완료");
        }, 3000)
    });
};

console.log("시작")
async function order(){
  try{
  	const result = await Promise.all([f1(), f2(), f3()]);
    console.log(result)
  } catch (e) {
  	console.log(e); * try 부분을 시도하고 만약 error가 있으면 이 부분에서 나옴
  }
  console.log("종료")
}
order();

결과

profile
아자아자 파이팅🔥

0개의 댓글