Resolving promises in a sequential manner can lead to encountering errors along

Question

Resolving promises in a sequential manner can lead to encountering errors along

Currently, I've been attempting to iterate through an array of IDs and pass them into a function (this.handleTransfer) that makes API calls. My goal is for the next iteration to only proceed when a response is received from the previous one. In my quest to achieve this, I turned to Google in search of how promises can help me with this task. However, upon implementing the solution I found online, I encountered the following error after the first iteration:

TypeError: e(...).then is not a function.

The code block responsible for the error was identified as:

return e().then(Array.prototype.concat.bind(t))

This is my current code setup:

const promiseSerial = funcs =>
        funcs.reduce((promise, func) =>
          promise.then(result => func().then(Array.prototype.concat.bind(result))),
          Promise.resolve([]))

        const payments = this.payIDArray;

        const funcs = payments.map(payment => () => this.handleTransfer(payment))

        promiseSerial(funcs)
        .then(console.log.bind(console))
        .catch(console.error.bind(console))

It's worth mentioning that I am utilizing the VueJS framework.

javascript arrays vue.js promise sequence

Answer 1

Answer №1

Upon reviewing the sample code provided, I made a few assumptions.

Initially, based on your utilization of
```
... promise.then(result => func().then ...
```
, it seems that this.handleTransfer(payment) likely returns a function that in turn returns a promise.
Secondly, given the use of concatenation in your code, it is assumed that the data returned by your API call is in an array format.

The implementation of promiseSerial presented below generates a promise chain that resolves to the concatenation of arrays received from the this.handleTransfer(payments) calls while maintaining the original sequence of these calls.

const promiseSerial = (funcs) => funcs.reduce((resultPromise, apiPromise) => {
    return resultPromise.then((concatenatedAPIResponses) => {
        const apiCallPromise = apiPromise(); //assuming this.handleTransfer(payment) returns a function  
        //const apiCallPromise = apiPromise; if this.handleTransfer(payment) returns a promise instead of a function

        return apiCallPromise.then((apiCallResponse) => {
            concatenatedAPIResponses = concatenatedAPIResponses.concat(apiCallResponse);
            return concatenatedAPIResponses;
        });
    });
}, Promise.resolve([]));

Check out the Codepen example here

Answer 2

Upon reviewing the sample code provided, I made a few assumptions.

Initially, based on your utilization of
```
... promise.then(result => func().then ...
```
, it seems that this.handleTransfer(payment) likely returns a function that in turn returns a promise.
Secondly, given the use of concatenation in your code, it is assumed that the data returned by your API call is in an array format.

The implementation of promiseSerial presented below generates a promise chain that resolves to the concatenation of arrays received from the this.handleTransfer(payments) calls while maintaining the original sequence of these calls.

const promiseSerial = (funcs) => funcs.reduce((resultPromise, apiPromise) => {
    return resultPromise.then((concatenatedAPIResponses) => {
        const apiCallPromise = apiPromise(); //assuming this.handleTransfer(payment) returns a function  
        //const apiCallPromise = apiPromise; if this.handleTransfer(payment) returns a promise instead of a function

        return apiCallPromise.then((apiCallResponse) => {
            concatenatedAPIResponses = concatenatedAPIResponses.concat(apiCallResponse);
            return concatenatedAPIResponses;
        });
    });
}, Promise.resolve([]));

Check out the Codepen example here

Resolving promises in a sequential manner can lead to encountering errors along

Answer №1

Similar questions

Error in Node.js Express: Attempted to access property 'image' of null resulting in an unhandled error event

Exiting or returning from a $scope function in AngularJS: a guide

Dealing with errors in Angular using dependency injection

The issues of cross-origin domains arise when utilizing iframes with src links originating from the server side

Organize every rectangle and text element in D3 into distinct groups

What is the best way to handle a $q.when promise in unit testing?

What are the steps to incorporate @svgr/webpack into turbopack within a next.js project?

Warning: Unhandled promise rejection - Type error encountered when trying to access property

Utilizing Bresenham's line drawing algorithm for showcasing box contours

Creating identical class names for UL elements underneath LI using JavaScript

Exploring elementary Expressjs query concepts

What is the best method for dynamically increasing the data in a shopping cart?

Creating a dynamic quiz with random images using text boxes in HTML and PHP

I'm seeking clarification on the composition of Objects in Node.js

Bring in resources without specifying

Is there a way to efficiently import multiple Vue plugins in a loop without the need to manually type out each file individually?

Continue scanning the expanding page until you reach the end

Deletion of a custom function in JavaScript

Exploring the utilization of type (specifically typescript type) within the @ApiProperty type in Swagger

Looking to eliminate a specific property within an object in MongoDB