게시 됨 업데이트 됨javascript1분안에 읽기 (약 159 단어)

js void operator, no-floating-promises

  • void ; 주어진 표현식을 평가하고 undefined를 반환합니다.

프로미스 다룰 때 주의할 점

  • no-floating-promises라는 룰이 있는데, 프로미스를 핸들하라는 것이다
  • 무시하고 싶은 경우에 void를 붙여줄 수 있는데,
  • 이 경우 내부에서 throw하는 에러를 외부에서 받지 못한다 (= catch에 안걸린다)
example.ts
1
2
3
4
5
6
7
8
9
10
const f = async () => {
  // ...
  throw Error('에러 발생');
};

try {
  void f();
} catch (error) {
  console.log(error); // not work!
}

참고

 게시 됨 업데이트 됨javascript1분안에 읽기 (약 157 단어)

promise all vs allSettled

example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 100, 'foo')
);
const promises = [promise1, promise2];

Promise.allSettled(promises)
  .then((results) => results.forEach((result) => console.log(result.status))) // 여기에 걸림
  .catch((err) => console.error(err));
// > "fulfilled"
// > "rejected"

Promise.all(promises)
  .then((results) => results.forEach((result) => console.log(result.status)))
  .catch((err) => console.error(err)); // 여기에 걸림
// > foo
  • all은 한개라도 실패하면 종료
  • allSettled은 실패하더라도 모든 프로미스 실행

allSettled 값 꺼내쓰기

example allSettled
1
2
3
4
const [job1, job2] = await Promise.allSettled(promiseJobs);
if (job1.status === 'rejected') throw job1.reason;

console.log(job1.value);
  • rejected : reason에서 실패사유를
  • fulfilled : value에서 값을 꺼내 쓸 수 있다

참고

 게시 됨 업데이트 됨javascript1분안에 읽기 (약 139 단어)

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가 처음에 엄청 헷갈리는데, 막힐 때마다 이 예제를 먼저 작성해보고 적용해보았던 것 같다

참고

 게시 됨 업데이트 됨javascript2분안에 읽기 (약 230 단어)

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));
})();

카테고리

아카이브

광고

×