Angular with TypeScript- how do I handle business logic within an observable callback?

Question

I'm trying to get some data and return something on success using an Angular HttpClient call like this:

    return this.http.post('api/my-route', model).subscribe(

        data => (
            this.data = data;
            return $window.location = ReturnUrlService.getAbsolute('/my-other-route');
        )
    )

Why can't I do this? My app is Angular 4.3 with TypeScript 2.6.2 My understanding is that the arrow function should be the equivalent of this callback:

function(data) {
        this.data = data;
        return $window.location = ReturnUrlService.getAbsolute('/my-other-route');
}

... and I'm treating 'data' like it will work as a 'success' callback in JQuery AJAX. Is a subscribe somehow limited to setting values of of properties within the class? What's wrong with my arrow function? I know I'm missing something basic!

Two remarks: (1) data => ( ... ) should be replaced with data => { ... }, (2) subscribe() returns a Subscription instance (often used to call its unsubscribe method), not the value returned by the callback function. — Martin Parenteau
– Martin Parenteau, Commented Feb 28, 2018 at 2:20

acdcjunior · Accepted Answer · 2018-02-28 02:40:33Z

You can only use () if the "body" is an expression. Your "body" are two statements:

return this.http.post('api/my-route', model).subscribe(
    data => (
        this.data = data;
        return $window.location = ReturnUrlService.getAbsolute('/my-other-route');
    )
)

Should be:

return this.http.post('api/my-route', model).subscribe(
    data => {                                                    // <==== changed this line
        this.data = data;
        return $window.location = ReturnUrlService.getAbsolute('/my-other-route');
    }                                                            // <==== changed this line
)

The `return` statement

It seems you just want to perform the assignment, not return any value. If that's the case, just remove the return keyword from that last statement.

If, on the other hand, you really do also want to return that value to the caller of that function, don't use subscribe, but other function that will just transform the Observable, such as map:

public myMethod(): Observable<any> {
  // ... create the model variable
  return this.http.post('api/my-route', model).map(
    data => {
        this.data = data;
        return $window.location = ReturnUrlService.getAbsolute('/my-other-route');
    }
  )
}

Of course, remember to subscribe to the result wherever you call myMethod:

public someOtherMethod() {
  return this.myMethod().subscribe(stuff => console.log(stuff));
}

Collectives™ on Stack Overflow

Angular with TypeScript- how do I handle business logic within an observable callback?

1 Answer 1

The `return` statement

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The return statement

Comments

Your Answer

Sign up or log in

Post as a guest

Related

The `return` statement