Promise.withResolvers()

1============================
2// Basics
3// Old way
4let resolve, reject;
5const promise = new Promise((res, rej) => {
6    resolve = res;
7    reject = rej;
8});
9
10// New way (Promise.withResolvers)
11const { promise, resolve, reject } = Promise.withResolvers();
12
13============================
14// Practical Example
15function fetchUsers() {
16  const { promise, resolve, reject } = Promise.withResolvers();
17  
18  // Simulating event-based API
19  userService.on('users', (users) => {
20    resolve(users);
21  });
22  
23  userService.on('error', (error) => {
24    reject(error);
25  });
26
27  userService.fetchAll();
28  
29  return promise;
30}
31
32// Usage
33const users = await fetchUsers();
34
35============================
36// Common scenario: Converting events to promises
37function waitForButtonClick(button) {
38  const { promise, resolve } = Promise.withResolvers();
39  
40  button.addEventListener('click', () => {
41    resolve('clicked!');
42  });
43  
44  return promise;
45}
46
47// Usage
48const button = document.querySelector('#myButton');
49const result = await waitForButtonClick(button);
50console.log(result); // 'clicked!'
51
52========================================
53// Handling Multiple Clicks
54function waitForButtonClick(button) {
55  const { promise, resolve } = Promise.withResolvers();
56  
57  button.addEventListener('click', () => {
58    resolve('clicked!');  // Only first click matters
59  });
60  
61  return promise;
62}
63
64// For multiple clicks, you'd need:
65function handleMultipleClicks(button) {
66  let clickCount = 0;
67  
68  button.addEventListener('click', () => {
69    clickCount++;
70    console.log(`Clicked ${clickCount} times`);
71  });
72}
73
74// Or if you want promises for each click:
75async function* clickStream(button) {
76  while (true) {
77    const { promise, resolve } = Promise.withResolvers();
78    button.addEventListener('click', resolve, { once: true });
79    yield await promise;
80  }
81}