Promise.withResolvers în JavaScript

Cod asincron ES2024

Creează o promisiune împreună cu funcțiile resolve și reject, folosibile din afara ei.

Sintaxă
const { promise, resolve, reject } = Promise.withResolvers();

Ce face Promise.withResolvers

Cu new Promise((resolve, reject) => ...), cele două funcții sunt disponibile doar în interiorul funcției date. Promise.withResolvers() le returnează direct, alături de promisiune, ca să le poți apela din alt loc: dintr-un eveniment, dintr-un callback sau din altă funcție.

Ce returnează

Un obiect { promise, resolve, reject }.

Exemple

Exemplul 1: Așteptarea unui eveniment

const butonTrimite = new EventTarget();

function asteaptaClic(tinta) {
  const { promise, resolve } = Promise.withResolvers();
  tinta.addEventListener("click", (e) => resolve(e.type), { once: true });
  return promise;
}

setTimeout(() => butonTrimite.dispatchEvent(new Event("click")), 100);
console.log("aștept...");
console.log("primit:", await asteaptaClic(butonTrimite));

Rezultat

aștept...
primit: click

Exemplul 2: Respingere din afară

const { promise, reject } = Promise.withResolvers();

setTimeout(() => reject(new Error("anulat de utilizator")), 50);
try {
  await promise;
} catch (e) {
  console.log(e.message);
}

Rezultat

anulat de utilizator

Greșeli frecvente

  • Uiți să apelezi vreodată resolve sau reject (de exemplu evenimentul nu mai vine). Promisiunea rămâne în așteptare pentru totdeauna; adaugă o limită de timp.

Comenzi înrudite

  • Promise / then: O promisiune reprezintă un rezultat care va veni mai târziu: o cerere la server, un fișier citit, o pauză.
  • Promise.resolve / Promise.reject: Creează o promisiune deja împlinită cu o valoare sau deja respinsă cu o eroare.
  • addEventListener: Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.