Async와 Await

async와 await 를 사용하면 promise를 체인 형식으로 반환하는 것 보다 가독성이 좋아진다.

Async의 사용법

함수 앞에 async를 붙여주면 해당 함수는 항상 promise를 반환한다.

async function getName() {
	return "Mike";
}

console.log(getName());

위의 코드를 실행하면 브라우저 콘솔창에 아래와같이 Promise가 반환된다.

Promise {<fulfilled>: "Mike"}

반환값이 Promise이기 때문에 해당 함수에 .then을 사용할 수 있다.

async function getName() {
	return "Mike";
}

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

then을 통해 반환하면 브라우저 콘솔창에 Mike 가 출력된다.

async가 분은 함수가 Promise를 반환하면 해당 Promise의 resolve값을 그대로 사용한다.

async function getName() {
	return Promise.resove("Tom");
}

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

//브라우저 콘솔창에 Tom 출력됨.

만약 함수 내부에서 에러가 발생하면 rejected 형태의 Promise가 반환된다.

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

getName().catch((err) => {
	console.log(err);
});

브라우저 콘솔창에 Error: err.. 가 출력된다.

---

Await 사용법

await 함수는 async 함수 내부에서만 사용 가능하다.

await 키워드 뒤에는 Promise가 오고 이 Promise가 다 처리 될 때까지 기다린다.

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

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

위 코드를 실행하면 브라우저 콘솔창에 "시작" 이 출력되고 1초 후에 showName()이 실행되어 "Mike"가 출력된다.

작동원리는 Promise인 getName()에서 resolve 값인 Mike가 resolve 되는 것을 기다렸다가(await) result에 넣어주고 console.log(result)로 출력된 것이다.

---

지난시간의 Promise들을 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 = () => {
	return new Promise((res, rej)=>{
    	setTimeout(()=>{
        	res("3번 주문 완료");
        }, 2000);
    })
}

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

order();

Async/Await에서의 reject 처리

Promise에서는 reject처리를 할 때 catch를 사용했었는데 async/await에서는 try~catch를 사용하여 감싸주면 된다.

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번 주문 완료");
            rej(new Error("err.."));
        }, 3000);
    })
}

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

console.log("시작");
async function order() {
	try() {
    	const result = await f1();
    	const result2 = await f2();
    	const result3 = await f3(); 
    	cnosole.log(result3)
    }catch (e) {
    	console.log(e)
    }
    console.log('종료');
}

order();

이렇게 하면 적절히 에러 처리를 해주고 cnosole.log('종료')를 실행한다.

await 뒤에는 promise가 오니까 Promise.all 또한 올 수 있다.
(ex. const result = await Promise.all([f1(), f2(), f3()]);)