Does adding .catch resolve a promise?

Question

Does adding .catch resolve a promise?

Being new to typescript / javascript, I have limited knowledge about promises. My current scenario involves creating three distinct promises within a cloud-function and subsequently returning them using

Promise.all([promise1, promise2, promise3])

. Each of these promises is generated within a function that includes the statement "return Promise...".

I am curious as to whether adding ".catch" inside these functions will impact the functionality of Promise.all. Does it matter if someServiceThatCreatesPromise() is returned with or without .catch()?

Code

export async function myCloudFirestoreFunction() {
   try  {
        const myFirstPromise = createFirstPromise()
        const mySecondPromise = createSecondPromise()
        const thirdPromise = createThirdPromise()

        return Promise.all([
          myFirstPromise,
          mySecondPromise,
          myThirdPromise
       ]);
   } catch (err) {
       functions.logger.err(`Something bad happened, See: ${(err as Error).message}`
   }
}

// What happens when using `.catch` vs. not using it?
function createFirstPromise() {
   return someServiceThatCreatesPromise().catch((err) => { // LOGGING });
}

// What happens when using `.catch` vs. not using it?
function createSecondPromise() {
   return someServiceThatCreatesPromise().catch((err) => { // LOGGING });
}

// What happens when using `.catch` vs. not using it?
function createThirdPromise() {
   return someServiceThatCreatesPromise().catch((err) => { // LOGGING });
}

javascript typescript promise

Answer 1

Answer №1

When adding .catch inside the createNPromise function, it will not have any impact if all your Promises are resolving without any rejections.

However, in case a Promise gets rejected and you try to catch it using the .catch method, it may not work as expected unless you throw the error again and catch it within a try/catch block in your myCloudFirestoreFunction.

async function myCloudFirestoreFunction() {
  try {
    const result = await Promise.all([
      createFirstPromise(),
      createSecondPromise()
    ]);
  } catch (error) {
    console.log({ error });
  }
}

function createFirstPromise() {
  return Promise.reject("Oof").catch((e) => {
    // do some work, e.g., logging, and then
    // throw the error so it can be caught by the caller
    throw e;
  });
}

function createSecondPromise() {
  return Promise.resolve("value");
}

myCloudFirestoreFunction();

Another approach is to simply handle errors within the caller function (myCloudFirestoreFunction) instead of catching them separately.

async function myCloudFirestoreFunction() {
  const result = await Promise.all([
    createFirstPromise(),
    createSecondPromise()
  ]).catch((err) => console.log({ err }));
}

function createFirstPromise() {
  return Promise.reject("Oof");
}

function createSecondPromise() {
  return Promise.resolve("value");
}

myCloudFirestoreFunction();

Answer 2

When adding .catch inside the createNPromise function, it will not have any impact if all your Promises are resolving without any rejections.

However, in case a Promise gets rejected and you try to catch it using the .catch method, it may not work as expected unless you throw the error again and catch it within a try/catch block in your myCloudFirestoreFunction.

async function myCloudFirestoreFunction() {
  try {
    const result = await Promise.all([
      createFirstPromise(),
      createSecondPromise()
    ]);
  } catch (error) {
    console.log({ error });
  }
}

function createFirstPromise() {
  return Promise.reject("Oof").catch((e) => {
    // do some work, e.g., logging, and then
    // throw the error so it can be caught by the caller
    throw e;
  });
}

function createSecondPromise() {
  return Promise.resolve("value");
}

myCloudFirestoreFunction();

Another approach is to simply handle errors within the caller function (myCloudFirestoreFunction) instead of catching them separately.

async function myCloudFirestoreFunction() {
  const result = await Promise.all([
    createFirstPromise(),
    createSecondPromise()
  ]).catch((err) => console.log({ err }));
}

function createFirstPromise() {
  return Promise.reject("Oof");
}

function createSecondPromise() {
  return Promise.resolve("value");
}

myCloudFirestoreFunction();

Answer 3

Answer №2

Can I still use Promise.all if I add ".catch" inside these functions?

Utilizing catch() within a promise does not interfere with the functionality of the original promise. It simply adds a callback to handle rejection, while also returning another promise that resolves after the initial one completes.

Is there any impact on someServiceThatCreatesPromise() when using it with or without .catch()?

The presence or absence of catch() does not affect how the returned promise is used in code downstream. Both the original promise and the one generated by catch() indicate when the work is complete by being fulfilled.

For a more thorough understanding of promises, consider exploring detailed documentation such as:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

This resource includes a helpful diagram to guide you through the process. Additionally, the document explains:

Even if a .then() does not contain a callback function returning a Promise object, processing will proceed to the next link in the chain. As a result, every rejection callback can be omitted until reaching the final .catch().

Answer 4

Can I still use Promise.all if I add ".catch" inside these functions?

Utilizing catch() within a promise does not interfere with the functionality of the original promise. It simply adds a callback to handle rejection, while also returning another promise that resolves after the initial one completes.

Is there any impact on someServiceThatCreatesPromise() when using it with or without .catch()?

The presence or absence of catch() does not affect how the returned promise is used in code downstream. Both the original promise and the one generated by catch() indicate when the work is complete by being fulfilled.

For a more thorough understanding of promises, consider exploring detailed documentation such as:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

This resource includes a helpful diagram to guide you through the process. Additionally, the document explains:

Even if a .then() does not contain a callback function returning a Promise object, processing will proceed to the next link in the chain. As a result, every rejection callback can be omitted until reaching the final .catch().

Does adding .catch resolve a promise?

Code

Answer №1

Answer №2

Similar questions

Dynamically load a custom element with a Component

Exploring the method of extracting multiple checkbox values from an HTML form

Sticky header in React data grid

Is there a CSS3 Selector With Similar Functionality to jQuery's .click()?

The Selenium driver's execute_script() function is not functioning as expected

Iterating through an array of objects and performing reduction based on various key-value pairs

Access the value of a variable passed from the view to the controller

Regularly send requests to an Express server using the $.get function

The alert function in the Ajax web method is malfunctioning

Is there a way for me to access the source code of elements within React Native?

Sort the array based on the enum name rather than its value

Having trouble with ReactJS rendering components?

Using React.js CSSTransition Component properties with TransitionGroup

When using Inertia.js with Typescript, an issue arises where the argument types {} and InertiaFormProps{} are not compatible with the parameter type Partial<VisitOptions> or undefined

Is it possible to pass arguments to setTimeout function?

Strange compilation issue "Syntax error: Unable to access 'map' property of null" occurs when map function is not utilized

What are the steps to successfully submit my form once all the validation requirements have been met?

How can I implement a feature to automatically close a drawer in a React application using the Material UI

Enhance the way UV coordinates are generated for rotated triangles/faces within THREE.js

Enabling real-time notifications through Express 4 middleware with socket.io integration