Calling $http.post in batches and chaining promises

Question

I have a use case where I have to call $http.post(request) on batches of the input data. For this, I created an array of requests. For each of them, I need to get the response of $http.post(), append it to an existing array and pass it to a rendering function. I have to make the next call only when the previous one completes and since $http.post() returns a promise (according to this), I am trying to do this using the reduce function.

function callToHttpPost(request) {
    return $http.post('someurl', request);
}

function outerFunc($scope, someId) {
    let completeArray = [];
    let arrayOfRequests = getRequestInBatches();

    arrayOfRequests.reduce((promiseChain, currentRequest) => {
        console.log(promiseChain);
        return promiseChain.then((previousResponse) => {
            completeArray.push.apply(completeArray, previousResponse.data);
            render($scope, completeArray, someId);
            return callToHttpPost(currentRequest);
        });
    }, Promise.resolve()).catch(e => errorHandler($scope, e, someId));
}

(I have referred MDN and this answer)

But this gives me TypeError: previousResponse is undefined. The log statement shows the first promise as resolved (since it is the initial value passed to the reduce function), but the other promises show up as rejected due to this error. How can I resolve this?

It's not clear why you're returning `Promise.resolve()).catch(e => errorHandler($scope, e, someId)` as the accumulator. Shouldn't it just be an array of requests? — Terry, Oct 31 '21 at 10:18
Promise.resolve() is the second argument to the `reduce` function. `arrayOfRequests.reduce(callbackFn, initialValue)` and the `.catch(e => errorHandler($scope, e, someId)` is for error handling. `Promise.resolve().then().then().then()....catch()` is what I am trying to achieve, but I encounter this error. — AmeyaS, Oct 31 '21 at 10:21

msbit · Answer 1 · 2021-11-04T02:14:22.917

Using vanilla Javascript

If the outerFunc function can be used in an async context (which it looks like it can, given that it returns nothing and the results are passed to the render function as they are built up), you could clean that right up, paring it down to:

async function outerFunc ($scope, someId) {
  const completeArray = []; 

  try {
    for (const request of getRequestInBatches()) {
      const { data } = await callToHttpPost(request);
      completeArray.push(...data);
      render($scope, completeArray, someId);
    }   
  } catch (e) {
    errorHandler($scope, e, someId);
  }
}

The sequential nature will be enforced by the async/await keywords.

Using RxJS

If you're able to add a dependency on RxJS, your can change the function to:

import { from } from 'rxjs';
import { concatMap, scan } from 'rxjs/operators';

function outerFunc ($scope, someId) {
  from(getRequestInBatches()).pipe(
    concatMap(callToHttpPost),
    scan((completeArray, { data }) => completeArray.concat(...data), []) 
  ).subscribe(
    completeArray => render($scope, completeArray, someId),
    e => errorHandler($scope, e, someId)
  );  
}

which revolves around the use of Observable instead of Promise. In this version, the sequential nature is enforced by the concatMap operator, and the complete array of results is reduced and emitted while being built up by the scan operator.

Ah yes, `apply`. Thanks for the edit @Bergi – msbit Oct 31 '21 at 21:57 — msbit, Oct 31 '21 at 21:57

AmeyaS · Accepted Answer · 2021-11-26T12:07:54.563

The error was in passing the initial value. In the first iteration of the reduce function, Promise.resolve() returns undefined. This is what is passed as previousResponse. Passing Promise.resolve({ data: [] }) as the initialValue to the reduce function solved the issue.

arrayOfRequests.reduce((promiseChain, currentRequest) => {
    console.log(promiseChain);
    return promiseChain.then((previousResponse) => {
        completeArray.push.apply(completeArray, previousResponse.data);
        render($scope, completeArray, someId);
        return callToHttpPost(currentRequest);
    });
}, Promise.resolve({ data: [] }))
.then(response => {
    completeArray.push.apply(completeArray, previousResponse.data);
    render($scope, completeArray, someId);
    displaySuccessNotification();
})
.catch(e => errorHandler($scope, e, someId));

(edited to handle the final response)

This is still wrong, though: it ignores the result of the last `callToHttpPost`. Instead, the accumulator `promiseChain` should hold the `completeArray` — Bergi, Oct 31 '21 at 15:34

Calling $http.post in batches and chaining promises

2 Answers2

Using vanilla Javascript

Using RxJS