delay observable to return value until i get result from my HTTP request in angular 5

Question

I want to delay observable to return value until i get new_token from my HTTP request in subscription. I am also using delay time but i could not able to success .

Error: returning undefined value

Expected: new_token returned from server

  refreshToken(): Observable<string> {

    const token_refreshed = localStorage.getItem("refresh_token");
  
    let new_token: string;
    if (token_refreshed) {
        console.log("this refreshed token" + token_refreshed);

        const headers = new HttpHeaders({
            'Authorization': "Basic " + btoa("clientId:client-secret"),
            'Content-Type': 'application/x-www-form-urlencoded',
            'grant_type': 'refresh_token',
            'refresh_token': token_refreshed
        });
        var creds = "grant_type=refresh_token" + "&credentials=true" + "&refresh_token=" + token_refreshed;

        this.httplclient.post<UserToken>('/api/oauth/token', creds, { headers: headers })
            .subscribe(response => {
               

                localStorage.setItem('access_token', response.access_token);
             
                new_token = response.access_token;
               
            }, err => {
                console.log("User authentication failed!");
            });
    }
    console.log('i am returning');
    return Observable.of(new_token).delay(3000);
}

Update: Method that is consuming refresh_token , I am using interceptor so, 401 method is below

handle401Error(req: HttpRequest<any>, next: HttpHandler) {
    if (!this.isRefreshingToken) {
        this.isRefreshingToken = true;
        console.log('I am handler 401');
        // Reset here so that the following requests wait until the token
        // comes back from the refreshToken call.
        this.tokenSubject.next(null);

        return this.authService.refreshToken()
            .switchMap((newToken: string) => {
                console.log('map token' + newToken);
//I'm getting null new token here from authService.refreshToken()           
              if (newToken) {
                    this.tokenSubject.next(newToken);


                    return next.handle(this.addToken(req, newToken));

                }

                return this.logoutUser();
            })
            .catch(error => {

                console.log('bad news its catch');
                return this.logoutUser();
            })
            .finally(() => {
                this.isRefreshingToken = false;
            });
    } else {
        return this.tokenSubject
            .filter(token => token != null)
            .take(1)
            .switchMap(token => {
                console.log('i am switch map else ');
                return next.handle(this.addToken(req, token));
            });
    }
}

Answer 1

You dont need to put a delay. Just pass the value whenever it is available because you can't be sure the value is available after 3000 ms.

  refreshToken(): Observable<string> {
    const tokenObsr = new Subject<string>();
    const token_refreshed = localStorage.getItem("refresh_token");

    if (token_refreshed) {
        console.log("this refreshed token" + token_refreshed);

        const headers = new HttpHeaders({
            'Authorization': "Basic " + btoa("clientId:client-secret"),
            'Content-Type': 'application/x-www-form-urlencoded',
            'grant_type': 'refresh_token',
            'refresh_token': token_refreshed
        });
        var creds = "grant_type=refresh_token" + "&credentials=true" + "&refresh_token=" + token_refreshed;

        this.httplclient.post<UserToken>('/api/oauth/token', creds, { headers: headers })
            .subscribe(response => {


                localStorage.setItem('access_token', response.access_token);

                tokenObsr.next(response.access_token);

            }, err => {
                console.log("User authentication failed!");
            });
    }
    console.log('i am returning');
    return tokenObsr.asObservable();
}

Update: after looking deep into your code i have made the requried changes. BehavoiurSubject to Subject. Try using it once.

Answer 2

If you have to await the return of your token, why don't you use a Promise instead of an Observable?

this.httplclient.post<UserToken>('/api/oauth/token', creds, { headers: headers }).toPromise().then((t: UserToken) => { 
   localStorage.setItem('access_token', t.access_token);
   new_token = t.access_token;
}).catch(() => {
   console.log("User authentication failed!");
});

And if you want to subscribe to changes somewhere else use a Subject.

// in your constructor
this.sub = new Subject();

// in your method to get the token
this.httplclient.post<UserToken>('/api/oauth/token', creds, { headers: headers }).toPromise().then((t: UserToken) => { 
   localStorage.setItem('access_token', t.access_token);
   new_token = t.access_token;
   this.sub.next(new_token);
}).catch(() => {
   console.log("User authentication failed!");
});

// getter for the subject
// use asObservable so other components can't use next(..) to push data
get tokenSub(): Observable<String> {
    return this.sub.asObservable();
}

// somewhere else
this.yourServer.tokenSub.subscribe((token: String) => {
    ....
}

Answer 3

If I understand correctly what you want to achieve, I think you should reorganize your code in order to be able to leverage the Obsersable pattern of RxJs.

Here my suggestion

refreshToken(): Observable<string> {

    const token_refreshed = localStorage.getItem("refresh_token");

    let new_token: string;
    if (token_refreshed) {
        console.log("this refreshed token" + token_refreshed);

        const headers = new HttpHeaders({
            'Authorization': "Basic " + btoa("clientId:client-secret"),
            'Content-Type': 'application/x-www-form-urlencoded',
            'grant_type': 'refresh_token',
            'refresh_token': token_refreshed
        });
        var creds = "grant_type=refresh_token" + "&credentials=true" + "&refresh_token=" + token_refreshed;

        return this.httplclient.post<UserToken>('/api/oauth/token', creds, { headers: headers })
// Do not subscribe here - rather chain operators to transform the Observable returned by http.post into what you really want to emit and return the Observable transformed
           .map(response => response.access_token)
           .do(token => localStorage.setItem('access_token', response.token))
           .do(token => console.log('I am returning', token)

}

If you do this, than whoever consumes refreshToken() method will have to subscribe to the returned Observable and manage the result there, like for instance

this.tokenService.refreshToken()
.subscribe(
   token => {// do something with the token, maybe move here the localStore.setItem logic},
   err => {// handle the error condition}
)

Answer 4

Don't subscribe to the post requests and if you want to perform some side-effects use the do operator instead.

if (token_refreshed) {
  return this.httplclient.post(...)
    .do(response => {
      localStorage...
    })
    .map(response => ...) // map the response to return only the new token?
    .delay(3000); // or maybe you don't need this?
}
return Observable.of(new_token).delay(3000);