Async / Await
async와 await
01.js
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function progress() {
console.log("HI HI");
await delay(1000);
console.log("BYE");
}
progress();
동기 작업이 필요 할 때 함수의 선언 앞부분에 async 키워드를 붙임.
그리고 Promise를 리턴 받는 곳에 await 키워드를 넣어주면 해당 Promise가 끝날 때까지 기다렸다 다음 작업을 수행 할 수 있음.
then
위 코드에서는 delay이라는 함수를 만들어서 파라미터로 넣어준 시간 만큼 기다리는 Promise를 만들고, 이를 progress 함수에서 사용함.
함수에서 async를 사용하면, 해당 함수는 결과 값으로 Promise를 반환하게 됨.
따라서 await을 기다린 후 작업할 것이 있다면, 다음과 같이 then을 써서 코드를 작성할 수 있음.
02.js
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function progress() {
console.log("HI HI");
await delay(1000);
console.log("BYE");
}
progress().then(() => {
console.log("progress end");
});
async await의 catch
async 함수에서 에러를 발생 시킬 때는 throw를 사용하고,
에러처리는 try / catch 문을 이용하면 됨.
03.js
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function troubleMaker() {
await delay(1000);
throw new Error("await make error");
}
async function progress() {
try {
await troubleMaker();
} catch (err) {
console.error(err.message);
}
}
progress();
async await의 return
동기 후 결과를 처리해야 한다면 then으로 결과를 받아서 처리할 수 있음.
04.js
const arr = ["a", "b", "c", "d", "e"];
const delay = (idx) => {
return new Promise((resolve) =>
setTimeout(() => {
resolve(arr[idx]);
}, 500)
);
};
const basic = async () => {
const item = await delay(2);
console.log("await end");
return item;
};
basic().then((result) => console.log(result));
async await 의 반복문.
반복문에서 await를 사용해야 하는 경우 forEach문은 사용할 수 없음.
일반적인 for문이나, for in, for of문을 사용해야 함.
05.js
const delay = (item) => {
return new Promise((resolve) =>
setTimeout(() => {
console.log(item);
resolve();
}, 500)
);
};
const arr = [0, 1, 2, 3, 4];
const loop = async (array) => {
array.forEach(async (item) => await delay(item));
console.log("DONE!");
};
loop(arr);
06.js
const delay = (item) => {
return new Promise((resolve) =>
setTimeout(() => {
console.log(item);
resolve();
}, 500)
);
};
const arr = [0, 1, 2, 3, 4];
const loop = async (array) => {
//array.forEach(async item => await delay(item));
for (let i = 0; i < array.length; i++) {
await delay(arr[i]);
}
for (const item of array) {
await delay(item);
}
for (const item in array) {
await delay(item);
}
console.log("DONE!");
};
loop(arr);
await의 병렬 처리
동기적이면서 병렬 처리를 하는 방법도 있음.
07.js
const delay = (item) => {
return new Promise((resolve) =>
setTimeout(() => {
console.log(item);
resolve();
}, 500)
);
};
const arr = [0, 1, 2, 3, 4];
const parallel = async (array) => {
const promises = array.map((item) => delay(item));
await Promise.all(promises);
console.log("DONE!");
};
parallel(arr);