"Utilize a series of Promise chains within a Promise's then

Question

"Utilize a series of Promise chains within a Promise's then

I am trying to retrieve an array list of object IDs from an API using axios. Once I have the object ID list, I want to fetch the details of each object using promises.

This is what I have in mind:

var objectDetail = [];

axios.get('apiendpoint/')
.then((response) => {
  var listOfObjectIds = response.data;
  var chain = Promise.resolve();
  for (var objectId of listOfObjectIds) {
    chain = chain.then(axios.get(`apiendpoint/${objectId}`)
      .then((response) => {
        objectDetail.push(response.data);
      })
    );
  }
  return chain;
}).then((chain) => {
  console.log(chain);
  return chain;
})

The code above is returning undefined as the promise chain object is not being passed to the then method call. I'm wondering if my approach is incorrect or if there's something I'm overlooking. Thank you.

Here are some related articles that I've come across:

How to loop dynamically over multiple promises in a for loop while using fetch?
Creating a promise chain in a for loop

javascript promise axios

Answer 1

Answer №1

The promise chain is being passed to the final .then, however, it is not returning any value. Take a look at your:

.then((response) => {
  objectDetail.push(response.data);
})

The above function does not return anything. If you intend to use objectDetail at the end of the chain without relying on an external variable, make sure to also include a return statement:

.then((response) => {
  objectDetail.push(response.data);
  return objectDetail;
})

Keep in mind that

}).then((chain) => {
  console.log(chain);
  return chain;
})

may be unnecessary - unless you are simply logging the result. In that case, it might be better to omit this step altogether.

If clarity is what you seek, consider using Promise.all instead:

axios.get('apiendpoint/')
  .then(({ data }) => Promise.all(
    data.map(objectId => (axios.get(`apiendpoint/${objectId}`)
      .then(res => res.data)
    ))
  ));

Answer 2

The promise chain is being passed to the final .then, however, it is not returning any value. Take a look at your:

.then((response) => {
  objectDetail.push(response.data);
})

The above function does not return anything. If you intend to use objectDetail at the end of the chain without relying on an external variable, make sure to also include a return statement:

.then((response) => {
  objectDetail.push(response.data);
  return objectDetail;
})

Keep in mind that

}).then((chain) => {
  console.log(chain);
  return chain;
})

may be unnecessary - unless you are simply logging the result. In that case, it might be better to omit this step altogether.

If clarity is what you seek, consider using Promise.all instead:

axios.get('apiendpoint/')
  .then(({ data }) => Promise.all(
    data.map(objectId => (axios.get(`apiendpoint/${objectId}`)
      .then(res => res.data)
    ))
  ));

Answer 3

Answer №2

In order to meet a promise, it cannot be fulfilled by another promise. If a promise is returned within a then( onfulfilled) handler, the code will wait for this returned promise to be resolved or rejected before moving on to the next promise in the chain using the outcome of the previously returned promise.

Thus,

//...
  return chain;
}).then((chain) => {
  console.log(chain);
  return chain;
})

This can be confusing - the promise named chain that is returned initially from the first line does not get passed to the subsequent then handler. Instead, what gets passed is the value of the last successfully completed promise within the chain. However, if no value is explicitly returned within the handlers for chain, it remains as undefined.

There are several options to address this:

For debugging purposes, you can choose to log the value of chain after fully constructing it, just before returning chain from the initial then handler.
You could also disregard the actual value being passed to the final success handler and interpret its invocation as an indication that objectDetail has valid data inside,

Create objectDetail within the first then handler and have it returned by promises added to chain during the construction phase.

axios.get('apiendpoint/')
.then((response) => {
    var listOfObjectId = response.data;
    var objectDetail = [];
    var chain = Promise.resolve()
    for (var objectId of listOfObjectId) {
        chain = chain.then(axios.get(`apiendpoint/${objectId}`)
        .then((response) => {
            objectDetail.push(response.data);
            return objectDetail; // return details array
        });
    }
    return chain;
})
.then( objectDetail) => {
    // process objectDetail
})
.catch(err=> console.log(err););

The above method handles detail requests in a sequential manner. For parallel issuance of these detail requests, consider rewriting it using Promise.all.

Answer 4

In order to meet a promise, it cannot be fulfilled by another promise. If a promise is returned within a then( onfulfilled) handler, the code will wait for this returned promise to be resolved or rejected before moving on to the next promise in the chain using the outcome of the previously returned promise.

Thus,

//...
  return chain;
}).then((chain) => {
  console.log(chain);
  return chain;
})

This can be confusing - the promise named chain that is returned initially from the first line does not get passed to the subsequent then handler. Instead, what gets passed is the value of the last successfully completed promise within the chain. However, if no value is explicitly returned within the handlers for chain, it remains as undefined.

There are several options to address this:

For debugging purposes, you can choose to log the value of chain after fully constructing it, just before returning chain from the initial then handler.
You could also disregard the actual value being passed to the final success handler and interpret its invocation as an indication that objectDetail has valid data inside,

Create objectDetail within the first then handler and have it returned by promises added to chain during the construction phase.

axios.get('apiendpoint/')
.then((response) => {
    var listOfObjectId = response.data;
    var objectDetail = [];
    var chain = Promise.resolve()
    for (var objectId of listOfObjectId) {
        chain = chain.then(axios.get(`apiendpoint/${objectId}`)
        .then((response) => {
            objectDetail.push(response.data);
            return objectDetail; // return details array
        });
    }
    return chain;
})
.then( objectDetail) => {
    // process objectDetail
})
.catch(err=> console.log(err););

The above method handles detail requests in a sequential manner. For parallel issuance of these detail requests, consider rewriting it using Promise.all.

"Utilize a series of Promise chains within a Promise's then

Answer №1

Answer №2

Similar questions

Is it possible for me to sum up each row in the table and then deactivate it using a checkbox?

Dynamic filtering with Javascript

From milliseconds to hours: a straightforward conversion

Remove multiselect label in PrimeNG

Is it mandatory to employ the spread operator in the process of updating an object while using the useState hook?

Ensure all division elements have the same height by utilizing a directive

What is the best way to load content into Bootstrap tabs?

The database is failing to reflect any changes even after using the db.insert function

When using Laravel 5.2, JSON data is mistakenly returned as HTML

Information is inaccessible beyond onBeforeMount in the Composition API of Vue 3

Is it possible to eliminate the css class prefix when using Modular css in React?

Do not allow the use of <p> or <br> tags in

Spin the Three.js camera in a circular motion along the Y-axis

Error encountered in Express middleware: Attempting to write private member #nextId to an object that was not declared in its class

The unusual spinning behavior of child elements in three.js

Identifying the Source of a Page Redirection in Javascript: A Step-by-Step Guide

What is the process of rotating a vector by 90 degrees to align it with a perpendicular plane, and then adjusting it further by 15 degrees out of

Deployment replacement in Kubernetes encounters error

Uncertain about the best way to utilize an observable

Unable to successfully create a dynamic anchor tag and open it in a new tab