Calling $http.post in batches and chaining promises-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

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: [] })).catch(e => errorHandler($scope, e, someId));