지난번 promise에 이어 이번에는 async/await에 대한 포스팅을 하겠습니다.
7. async/await
노드 7.6 버전부터 지원되는 기능입니다. 자바스크립트 스펙은 ES2017입니다.
최신 기능이면서 정말 혁신적인 기능입니다. 특히 노드처럼 비동기프로그래밍을 해야 할 때 도움이 많이 됩니다.
프로미스가 콜백 지옥을 해결했다지만, 여전히 코드가 장황합니다.
async/await 문법은 프로미스를사용한 코드를 한 번 더 깔끔하게 줄여줍니다.
프로미스 코드를 다시 한 번 보겠습니다.
function findAndSaveUser(Users) {
Users.findOne({})
.then((user) => {
user.name ='zero';
return user.save();
})
.then((user) => {
return Users.findOne({ gender:'m' });
})
.then((user) => {
// 생략
})
.catch(err => {
console.error(err);
});
}
콜백과 다르게 코드의 깊이가 깊진 않지만, 코드 길이는 여전히 깁니다.
async/await 문법을 사용하면 다음과 같이 바꿀 수 있습니다.
async function 이라는 것이 추가되었습니다.
async function findAndSaveUser(Users) {
let user = await Users.findOne({});
user.name ='zero';
user = await user.save();
user = await Users.findOne({ gender:'m' });
// 생략
}
놀라울 정도로 코드가 짧아졌습니다.
함수 선언부를 일반 함수 대신 async function으로 교체한 후, 프로미스 앞에 await을 붙여주었습니다. 이제 함수는
해당 프로미스가 resolve될 때까지 기다린 뒤 다음 로직으로 넘어갑니다.
예를 들면 await Users.findOne({})이 resolve될 때까지 기다린 뒤, user 변수를 초기화하는 것입니다.
위 코드는 에러를 처리하는 부분이 없으므로 다음과 같은 추가 작업이 필요합니다.
async function findAndSaveUser(Users) {
try {
let user = await Users.findOne({});
user.name ='zero';
user = await user.save();
user = await Users.findOne({ gender:'m' });
// 생략
} catch (error) {
console.error(error);
}
}
try/catch문으로 로직을 감쌌습니다. 프로미스의 catch 메서드처럼 try/catch 문의 catch가 에러를 처리합니다.
화살표 함수도 async와 같이 사용할 수 있습니다.
const findAndSaveUser = async (Users) => {
try {
let user = await Users.findOne({});
user.name ='zero';
user = await user.save();
user = await Users.findOne({ gender:'m' });
// 생략
} catch (error) {
console.error(error);
}
};
for문과 async/await을 같이 써서 Promise.all을 대체할 수도 있습니다.
이것은 노드 10 버전부터 지원하는 ES2018 문법입니다.
const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
(async () => {
for await (promise of [promise1, promise2]) {
console.log(promise);
}
})();
Promise.all 대신 for await of문을 사용해서 프로미스를 반복하는 모습입니다
.
앞으로 중첩되는 콜백 함수가 있다면 프로미스를 거쳐 async/await 문법으로 바꾸는 연습을 해보기 바랍니다. 코드가 훨씬 간결해질 것입니다.
'개발 > FRONT' 카테고리의 다른 글
jquery json을 form으로, form을 json으로 (0) | 2024.01.13 |
---|---|
data attribute와 dataset (0) | 2024.01.07 |
ES2015+(Promise) (0) | 2024.01.07 |
ES2015+(화살표 함수, 비구조화 할당) (0) | 2024.01.07 |
ES2015+ (const, let, 템플릿 문자열, 객체 리터럴) (0) | 2024.01.07 |