In TypeScript, what is the method to specifically retrieve only resolved Promises while disregarding errors?

Question

In TypeScript, what is the method to specifically retrieve only resolved Promises while disregarding errors?

I have come up with a function that is supposed to take an array of Promises and only return the resolved ones while ignoring any errors. It's similar to Promise.all but without considering errors. The challenge is implementing this function correctly in TypeScript. Previously, when I was using just JavaScript, I expected the desired results.

function promiseIgnoreErrors<T> (arrayOfPromise: Array<T>)  {
    const isArrayEmpty =
      Array.isArray(arrayOfPromise) && arrayOfPromise.length === 0;
  
    return new Promise((resolve, reject) => {
      if (isArrayEmpty) reject(new Error('Forever pending array'));
  
      let resolvedArray: Array<T> = []
      
      let resolvedCounter: number = 0;
  
      arrayOfPromise.forEach((promise, index) => {
        if (promise instanceof Promise) {
          promise
            .then((data) => {
              resolvedArray[index] = data
              resolvedCounter++;      
              if (arrayOfPromise.length === resolvedCounter) resolve(resolvedArray)   
            })
            .catch(() => {
              resolvedCounter++;
              if (arrayOfPromise.length === resolvedCounter) resolve(resolvedArray)
            })
        } else {
          resolvedArray[index] = promise
          resolvedCounter++;
          if (arrayOfPromise.length === resolvedCounter) resolve(resolvedArray)   
        }
      })
    });
  };

Here is a brief overview of my problem along with some sample variables:

const p1 = new Promise((resolve) => setTimeout(() => resolve('JS'), 500))
const p2 = 22
const p3 = new Promise((reject) => setTimeout(() => reject(new Error('Oops')), 100))
const p4 = new Promise((resolve) => setTimeout(() => resolve('TS'), 200))

When I pass these variables as an array,

promiseIgnoreErrors([p1, p2, p3, Promise.reject(10), p4])

I expect to get:

Promise {<pending>}
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(3)
// ['JS', 22, 'TS']

However, the actual output is:

Promise {<pending>}
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: Array(5)
    // ['JS', 22, Error: 'Oops, ?, 'TS']

You can see this issue in action here: Playground

I suspect the issue lies with the generic type and specifically this line:

let resolvedArray: Array<T> = []

because it suggests that the returned array must consist of the same elements as the input. Maybe it should be something like:

let resolvedArray: Array<K> extends T = []

While I know the above line is incorrect, maybe following this idea could lead to a solution.. Or perhaps there's another flaw in my function?

I would appreciate any help!

javascript typescript promise typescript-generics

Answer 1

Answer №1

This appears to be sufficient.

The concept here is that ERRORED serves as a sentinel object; if a promise within the array throws an error, it is caught and transformed into an ERRORED.

isNotErrored(x) is a type guard function that assures TypeScript that x is not the sentinel, resulting in the type of results.filter(isNotErrored) being T[], rather than (T | '__ERRORED__')[].

const ERRORED = '__ERRORED__';
type ErroredType = typeof ERRORED;

function isNotErrored<T>(x: T | ErroredType): x is T {
  return x !== ERRORED;
}

async function promiseIgnoreErrors<T>(promises: Array<Promise<T>>): Promise<Array<T>> {
  const results = await Promise.all(promises.map(p => p.catch(() => ERRORED as ErroredType)));
  return results.filter(isNotErrored);
}

For example:


promiseIgnoreErrors([Promise.resolve(8), Promise.reject("oh no"), Promise.resolve(16)]).then(r => {
  console.log(r);
});

will log:

[8, 16]

ignoring any rejections.

EDIT:

In the case of the original inputs:

const p1 = new Promise((resolve) => setTimeout(() => resolve('JS'), 500))
const p2 = 22
const p3 = new Promise((reject) => setTimeout(() => reject(new Error('Oops')), 100))
const p4 = new Promise((resolve) => setTimeout(() => resolve('TS'), 200))

this will not pass type-checking, as not all inputs are promises, which is the intended behavior. As mentioned in the comments, plain values should be wrapped with Promise.resolve(), for instance:

const p2 = Promise.resolve(22)

Alternatively, you could handle this internally:


function isPromiseLike<T>(x: T | Promise<T>): x is Promise<T> {
  return (x as any).then;  // Checks whether the object has a `then`; usually sufficient.
}

async function promiseIgnoreErrors2<T>(values: Array<T | Promise<T>>): Promise<Array<T>> {
  const promises = values.map((v) => isPromiseLike(v) ? v : Promise.resolve(v));
  const results = await Promise.all(promises.map(p => p.catch(() => ERRORED as ErroredType)));
  return results.filter(isNotErrored);
}

Answer 2

This appears to be sufficient.

The concept here is that ERRORED serves as a sentinel object; if a promise within the array throws an error, it is caught and transformed into an ERRORED.

isNotErrored(x) is a type guard function that assures TypeScript that x is not the sentinel, resulting in the type of results.filter(isNotErrored) being T[], rather than (T | '__ERRORED__')[].

const ERRORED = '__ERRORED__';
type ErroredType = typeof ERRORED;

function isNotErrored<T>(x: T | ErroredType): x is T {
  return x !== ERRORED;
}

async function promiseIgnoreErrors<T>(promises: Array<Promise<T>>): Promise<Array<T>> {
  const results = await Promise.all(promises.map(p => p.catch(() => ERRORED as ErroredType)));
  return results.filter(isNotErrored);
}

For example:


promiseIgnoreErrors([Promise.resolve(8), Promise.reject("oh no"), Promise.resolve(16)]).then(r => {
  console.log(r);
});

will log:

[8, 16]

ignoring any rejections.

EDIT:

In the case of the original inputs:

const p1 = new Promise((resolve) => setTimeout(() => resolve('JS'), 500))
const p2 = 22
const p3 = new Promise((reject) => setTimeout(() => reject(new Error('Oops')), 100))
const p4 = new Promise((resolve) => setTimeout(() => resolve('TS'), 200))

this will not pass type-checking, as not all inputs are promises, which is the intended behavior. As mentioned in the comments, plain values should be wrapped with Promise.resolve(), for instance:

const p2 = Promise.resolve(22)

Alternatively, you could handle this internally:


function isPromiseLike<T>(x: T | Promise<T>): x is Promise<T> {
  return (x as any).then;  // Checks whether the object has a `then`; usually sufficient.
}

async function promiseIgnoreErrors2<T>(values: Array<T | Promise<T>>): Promise<Array<T>> {
  const promises = values.map((v) => isPromiseLike(v) ? v : Promise.resolve(v));
  const results = await Promise.all(promises.map(p => p.catch(() => ERRORED as ErroredType)));
  return results.filter(isNotErrored);
}

Answer 3

Answer №2

async function handlePromises<T>(arrayOfPromise: Array<T>) {
  const promises = await Promise.all(arrayOfPromise.map((p) => convertToPromise(p)))
  return promises.filter((v) => v != null)
}

const convertToPromise = <T>(value: T) =>
  Promise.resolve(value)
    .then((v) => (v instanceof Error ? null : v))
    .catch(() => null)


const result = handlePromises([promise1, promise2, promise3, promise4, promise5])

console.log(result)                // Promise { <pending> }
result.then((x) => console.log(x)) // [ 'JS', 22, 'TS' ]

Update

Removed flatMap version to prevent confusion

Answer 4

async function handlePromises<T>(arrayOfPromise: Array<T>) {
  const promises = await Promise.all(arrayOfPromise.map((p) => convertToPromise(p)))
  return promises.filter((v) => v != null)
}

const convertToPromise = <T>(value: T) =>
  Promise.resolve(value)
    .then((v) => (v instanceof Error ? null : v))
    .catch(() => null)


const result = handlePromises([promise1, promise2, promise3, promise4, promise5])

console.log(result)                // Promise { <pending> }
result.then((x) => console.log(x)) // [ 'JS', 22, 'TS' ]

Update

Removed flatMap version to prevent confusion

In TypeScript, what is the method to specifically retrieve only resolved Promises while disregarding errors?

Answer №1

EDIT:

Answer №2

Similar questions

Steps for selectively targeting and updating a group of properties in a TypeScript class

Dealing with extended render times in React applications

Is there a way to retrieve the name of a JSON or obtain the file path using NodeJS Express Router?

Troubleshooting problem in Grunt-TS, Grunt, watch/compile, and Dropbox integration

Leveraging configuration files for HTML pages without any server-side code

Leveraging Toaster Notifications in AngularJS for Custom Exception Management and Logging

The process of altering the color of a table row in JavaScript can be done after dismissing a pop-up that was triggered by a button within the same row

Utilizing React Bootstrap with TypeScript for Styling Active NavItem with Inline CSS

Angular: Enhance communication with controllers and directives

Utilizing callback functions within an AJAX request to return a response and trigger further functions within a promise chain

Transforming a request from Angular to PHP through formatting

Is there a way to determine the number of clicks on something?

Using a combination of ajax and php to enhance the voting system

Why is DynamoDB still not deleting the item even though the promise returns successfully?

Encountered a error 500 while attempting to POST using Postman in Node.js

Utilizing asynchronous false in Wordpress Ajax functionality

Vue component input form not providing expected result

Node app experiencing issues with passport authentication request route only in production mode

Access various data from the local storage and display them inside a div container

How can we use the useState hook in React to dynamically generate state variables?