嵌套订阅的Angular Typescript返回类型

Question

I have a function which calls multiple service methods. This function resides in a service object, which i need to call from the app.component.ts, from there i need to wait until this functions is completed to execute more code. My question is how can i change the return type of this so that i can subscribe to it from app.component.ts My code is as below.

public registerAndGetToken() {

   this.initializeRegistration().subscribe((match)=> {

   // if initialization is success then invoke callback function
   // initializationCallback() will return a boolean (synchronous function)

   const callbackResult = this.initializationCallback(match);

   if(callbackResult) {

       this.renewToken().subscribe((tokenResult)=> {

       //renewTokenCallback is a synchronous function
       this.renewTokenCallback();
       //what to return from here??
       }, 
      (tokenError) => {
      //what to return from here?? 
      });
   }
   else {
    // what to return from here??
   }
 },
(error) => {
 // what to return from here??
});

I tried to add a "return" on this.initializeRegistration() line and then return Observable.of(true); and change the method signature to public registerAndGetToken(): Observable<boolean> . But it doesn't like it. Says

Type 'Subscription' is not assignable to type 'Observable'.
Property '_isScalar' is missing in type 'Subscription'. [2322]

Answer 1

You've got way too many subscribes. :)

I heard some good advice once about Observables - "be suspicious of a subscribe within a subscribe". That's pretty good advice because it probably means I'm approaching the problem incorrectly if I am doing that. As a general rule of thumb I also tend not to subscribe within a service, but leave that for the component (or better yet just for the template of the component). Otherwise there is too much opportunity for memory leaks, trying to make sure I unsubscribe them all.

In your case I am glad you specify rxjs 5.5 because that is when the .pipe operator was introduced and that will make your code significantly easier to write I think. There is much I do not know about your code, so I offer the following not as a cut-and-paste solution, but rather as an example of how to refactor this to take out all the subscribes from your service, and ultimately return an observable which can be subscribed to in your component, as you stated in your question.

Here is some code you can think about:

public registerAndGetToken() {
    return this.initializeRegistration().pipe( // <-- return an Observable
        catchError((error) => {
            // handle case when initializeRegistration gives back an error,
            // for example:
            return throwError(`initializeRegistration() threw error: ${error.message}`);
            // This assumes the error will be bubbled up to the component
        }),
        mergeMap((match) => {
            const callbackResult = this.initializationCallback(match);
            if(callbackResult) {
                return this.renewToken().pipe(
                    tap((tokenResult)=> {
                        // Your example never uses tokenResult for anything ...
                        // so I'll assume you actually want tokenResult to bubble
                        // up all the way your component as the result ...
                        this.renewTokenCallback(); // This makes no sense to me ...
                                                   // why have a callback here?
                    }),
                    catchError((tokenError) => {
                        // add code to handle renewToken() returning an error 
                        return tokenError;
                    })
                )
            }
            else {
                // return something that can be handled inside the component 
                // when callbackResult is false.
                // for example:
                return throwError('callbackResult is false');
            }
        })
    )
}

Update - I thought I'd share some thoughts about why for each step, in case that is helpful.

• Overall structure is that when the component subscribes to this chain, initializeRegistration() will become the source (or outer) observable that kicks things off, and once that completes then renewToken() will be mapped into the chain and provide the ultimate result as the returned token.
• Start with a return statement because this function will be all about setting up a single observable chain which is returned and can be subscribed to from the component.
• Next, start things off with initializeRegistration() . After the component subscribes, this function will get executed and the chain will wait to proceed until it completes (or gives an error).
• Next, check for an error. This needs to be done at this point because we are about to map (change) the observable in the chain with mergeMap so before we do that we check the source observable for errors and deal with them.
• Next, mergeMap. This operator takes care of the 'subscribe up', implicitly subscribing to initializeRegistration when it is in turn subscribed to by the component, so we don't need that nested subscribe pattern in your original function. This operator also maps the new observable (in this case the returned value from renewToken() into our chain. Therefore we are no longer passing along match , we are now passing along tokenResult in the chain.
• Before placing the result back into the main chain we will pipe that through two additional operators (I do that here in a sub-chain rather than in the main chain because of the if-else logic):
• First sub-chain operator is tap . Here is where I really don't understand your business logic and may be wrong in this. Because tap doesn't really affect the chain at all but rather just gives us an insertion point where we can execute some sort of side effect, this is what I chose to call the renewTokenCallback() . Depending what that function does this may not be the right way to handle this ...
• Next sub-chain operator is catchError , this is the check for errors from renewToken()
• Now done with the sub-chain, that is returned and back to the main chain again
• Finally is the else - it is important that we return an actual observable from within this else that can be mergeMapped back into the main chain. What that observable should be is unclear to me - some message up to the component to tell it that something went wrong in the callbackResult

I hope this helps.