Returning Data from Javascript Promise

Question

This is done in angular 2 and typescript.

I am trying to return data from the server and pass it back to a component in angular.

getUsers(): Promise<User[]> {
    return this.http.get(this.baseUserUrl + 'GetUsers')
        .toPromise()
         //.then(resp => resp.json() as User[])
        .then(this.returnData)
        .catch(this.handleError);
}


private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
}

private returnData(data: any): User[] {
    var rtn = data.json() as User[];
    return rtn;
}

Data is returned from the server fine and is casted to User[] fine also.

However, its not returned to the javascript method.

ngOnInit(): void {
         this.userService.getUsers().then(users => this.users = users);

    }

My this.users is just a bunch of promise related stuff and not the users array.

Fetrarij · Accepted Answer · 2017-10-20T03:46:02.377

Explanation: You already call .then in getUsers() so calling it twice wil not have the data it's about chaining a promise, so for your code you can set returnData to a Promise too and can chain it like you do.

private returnData(data: any): Promise<User[]> {
    var rtn = data.json() as User[];
    return Promise.resolve(rtn);
}

now you can use:

this.userService.getUsers().then(users => this.users = users);

But, but the simplest way is using the observable map operator :

getUsers(): Promise<User[]> {
    return this.http.get(this.baseUserUrl + 'GetUsers')
        .map(users => this.returnData(users))
        .toPromise()
}

and in ngOnInit:

ngOnInit(): void {
     this.userService.getUsers().then(users => {
         this.users = users
     });

}

Or just observable:

getUsers(): Observable<User[]> {
    return this.http.get(this.baseUserUrl + 'GetUsers')
        .map(users => this.returnData(users))
}

and

ngOnInit(): void {
     this.userService.getUsers().subscribe(users => {
         this.users = users
     });

this can be solved easily with Observables also. I guess the OP didn't call the resolve after getting the data. — Niladri, Oct 05 '17 at 12:25

score 0 · Answer 2 · answered Oct 05 '17 at 12:25

The promise returns immediately, so this won't work.

The success and error events need to be handled up on the model level so you can do what you want with the data (not the service's responsibility). The service just gets data and sends it along to the callbacks.

Something like this:

loadUsers(successCallback, errorCallback): Promise<User[]> {
    return this.http.get(this.baseUserUrl + 'GetUsers')
        .toPromise()
        .then(successCallback)
        .catch(errorCallback);
}

// MOVE METHODS TO MODEL CODE
var self = this;
self.users = [];

private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
}

private loadData(data: any): User[] {
    self.users = data.json() as User[];
}

ngOnInit(): void {
         this.userService.loadUsers(loadData, handleError);

    }

Returning Data from Javascript Promise

2 Answers2