Angular using promise with generics inside promise

Question

I need to interlace promises in my app:

  protected scroll<T>(path: string, pageSize: number, filter: string, data: T[]): Promise<T[]> {    
            let promise = new Promise<T[]>(function(resolve, reject) {
                this.httpClient
                    .get<T[]>(this.appConfigService.buildApiUrl(path), { params })
                    .toPromise<T[]>()
                    .then(result => {
                        if (result) {
                            resolve(data.concat(result));
                        }
                    })
                    .catch(function(e) {
                        reject(e);
                    });
            });

            return promise;
        }

My problem is that I receive following message: 'Untyped function calls may not accept type arguments'

How would I solve this?

UPDATE:

I should not have removed the if condition from the example:

  if (!filter) {
            const params = new HttpParams()
                .set('searchText', '')
                .set('skip', data.length.toString())
                .set('take', pageSize.toString());

            const promise = new Promise<T[]>((resolve, reject) => {
                this.httpClient
                    .get<T>(this.appConfigService.buildApiUrl(path), { params })
                    .toPromise<any>()
                    .then(result => {
                        if (result) {
                            resolve(data.concat(result));
                        }
                        resolve(data);
                    })
                    .catch(e => reject(e));
            });

            return promise;
        }
        // also returning a promise
        return this.filter<T>(data, pageSize, filter, path);

You use function(resolve, reject) {...} while addressing this.httpClient, but I don't see a bind(). I suggest you use arrow syntax: new Promise<T[]>((resolve, reject) => {...}). — Silvermind
– Silvermind, Commented Oct 25, 2019 at 8:08

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

There are a couple of problems there.

The error message is because you're using <T[]> on get and toPromise, which aren't generic functions. Just apply the type T to result in the then handler.
You're falling into the promise creation antipattern. You already have a promise (from this.httpClient), so you don't need new Promise.
You're using a traditional function for your new Promise callback, but then using this within it as though it were still referring to your class instance. If you were going to keep the new Promise, you'd want an arrow function instead, so it closes over this.

Instead (see *** comments):

protected scroll<T>(path: string, pageSize: number, filter: string, data: T[]): Promise<T[]> {    
    // *** Return the result of calling `then` on the promise from `toPromise`
    return this.httpClient
        // *** Don't use <T[]> on `get` and `toPromise`
        .get(this.appConfigService.buildApiUrl(path), { params })
        .toPromise()
        .then((result: T) => { // *** <== Note the `T`
            // *** If it's really possible that `result` will be falsy and you don't want that
            // to be valid, you can do this:
            if (!result) {
                throw new Error("appropriate error here");
            }
            return data.concat(result);
        });
}

On the playground

UPDATE:

I should not have removed the if condition from the example:

It doesn't matter, just put the body of the above into the if block:

protected scroll<T>(path: string, pageSize: number, filter: string, data: T[]): Promise<T[]> {    
    if (!filter) {
        const params = new HttpParams()
           .set('searchText', '')
           .set('skip', data.length.toString())
           .set('take', pageSize.toString());

        return this.httpClient
            // *** Don't use <T[]> on `get` and `toPromise`
            .get(this.appConfigService.buildApiUrl(path), { params })
            .toPromise()
            .then((result: T) => { // *** <== Note the `T`
                // *** If it's really possible that `result` will be falsy and you don't want that
                // to be valid, you can do this:
                if (!result) {
                    throw new Error("appropriate error here");
                }
                return data.concat(result);
            });
    }
    return this.filter<T>(data, pageSize, filter, path);
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 25, 2019 at 8:12

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yBother Over a year ago

1 -> I need to specify T[] in order to apply concat on the result. 2. -> I don't see how you want to be able to fetch the result and apply concatting without using a .then() block.

T.J. Crowder Over a year ago

@yBother - 1. No, you don't, see the type I applied to result (I should have called that out). 2. Oops, missed the concat, fixed. BTW, your update to the question doesn't fundamentally change anything.

Collectives™ on Stack Overflow

Angular using promise with generics inside promise

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related