setTimeout Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const delay = (ms) => {
return new Promise((resolve) =>
setTimeout(() => {
resolve(ms);
}, ms)
);
};
const main = async () => {
console.log(`main start`);

const result = delay(1000);
result.then(console.log);
console.log(`main end`);
};

const main2 = async () => {
console.log(`main start`);

const result = await delay(1000);
console.log(result);
console.log(`main end`);
};

main();
// main2();
  • promise를 알려주는 여러 글, 영상에서 setTimeout으로 예제로 진행한다
  • setTimeout을 promise로 감싸면 딜레이를 만들 수 있다
  • promise가 처음에 엄청 헷갈리는데, 막힐 때마다 이 예제를 먼저 작성해보고 적용해보았던 것 같다

참고

forEach await 안되는 문제

상황

  • 배열로 저장되어 있는 데이터를 forEach로 순회하면서 db에 INSERT하는 쿼리를 만들려고 했다
  • 근데 비동기적으로 동작했다
1
2
3
await data.forEach(async (element: ArticlePreview, idx: number) => {
// insert query
});

해결

1
2
3
4
5
6
7
8
9
for (const element of data) {
// ...
try {
const a = await databaseConnection.query(queryString, [
// ...
]);
}
// ...
}
  • for of에서는 await을 통해서 순차적으로 처리가 가능했다

시도해보지 않은 다른 방향

참고

Promise 연습, js 비동기 연습

js
1
2
3
4
// 프로미스 병렬처리 ; all
await Promise.all([delay2(1000), delay2(2000)]).then((result) => {
console.log(result.join(' + '));
});
  • 처음에는 익숙해지기 어렵지만, 꿀인 비동기

promise

  • js에는 promise라는게 있다
  • 비동기 흐름에서 중요하다
  • 프로미스는 선언과 동시에 실행이된다
  • 프로미스 결과를 처리하려면 then을 통해 받아 볼 수 있다

async await

js
1
2
3
4
5
6
7
8
async function delay2(ms) {
await new Promise((resolve) => {
setTimeout(() => {
resolve(ms);
}, ms);
});
return ms;
}
  • await 키워드는 async 함수 내에서만 사용가능하다
  • await 를 통해서 promise가 Fulfilled상태가 되야지만 다음줄의 코드가 실행된다

병렬처리

Promise.race

js
1
2
3
await Promise.race([delay2(1000), delay2(2000)]).then((result) => {
console.log(result);
});
  • 1초뒤에 1000만 반환하는 코드이다

Promise.all

js
1
2
3
await Promise.all([delay2(1000), delay2(2000)]).then((result) => {
console.log(result.join(' + '));
});
  • 2초뒤에 1000 + 2000을 반환하는 코드이다

요상한 문법

js
1
2
3
(async () => {
console.log(await delay2(1000));
})();