Повертати власний проміс тепер зручніше з Promise.withResolvers()

Доволі частий випадок, коли треба повертати проміс та виповнювати resolve або reject власноруч. Наприклад, коли у нас є синхронна функція на колбеках, але ми хочемо перетворити її на проміс.

return new Promise((resolve, reject) => {
  someSyncFunc((result) => {
	if (result === 'success') resolve();
	else reject();
  });
});

Такий вид запису є не дуже зручним, тому для спрощення подібного коду в JavaScript з'явився метод Promise.withResolvers().

Використання

Новий метод withResolvers при виповненні повертає об'єкт, в якому знаходяться 3 змінні:

promise - сам проміс, в якому буде результат
resolve - функція для успішного завершення промісу
reject - функція для завершення з помилкою

Тому приклад, що був наведений вище, тепер можна переписати наступним чином:

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

someSyncFunc((result) => {
  if (result === 'success') resolve();
  else reject();
});

return promise;

Тепер повернення кастомного промісу виглядає простіше і має меншу вкладеність, що дає більше шансів уникнути цього відомого мему:

enter image description here

Підтримка

Всі сучасні браузери вже підтримують цей новий метод, але використовувати його ще зарано, бо часткова підтримка розпочалася наприкінці 2023-го року, а деякі браузери взагалі почали підтримувати його лише на початку 2024-го року.

Проте для проєктів можна додати невеликий поліфіл:

Promise.withResolvers ||= function() {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
  });
  return { promise, resolve, reject };
}

Або почати використовувати функцію на основі цього поліфілу:

function promiseWithResolvers() {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
  });
  return { promise, resolve, reject };
}