CODEWITHSUNDEEP
rxjsangular8rxjs6
nurdyguy
nurdyguy

Reputation: 2945

How do I blend a promise with an observable?

I'm having trouble promises and observables. I have a handful of http requests which are defined in a package using promises. In the rest of my code I am using observables for various things, including other http calls. In one particular section I am checking to see if the user's bearer token is expired and if so then I get a new token and then proceed with the rest of the call.

if (!token || token.exp < Math.round((new Date()).getTime() / 1000)) {
  from(this._store.refreshBearerToken())
    .pipe(flatMap(resp => {
       let newToken = resp.data;
       newToken.exp = (new Date()).getTime() / 1000 + newToken.expires_in;
       localStorage.setItem('token', JSON.stringify(newToken))

       options = options || {};
       options.headers = new HttpHeaders({
         "Authorization": `${newToken.token_type} ${newToken.access_token}`,
         "Content-Type": "application/json"
        });
       return this._http$.request<T>(method, url, options as Object).pipe(share());
     }));
}

Bearer Token method:

async refreshBearerToken() {
    const response = await this._q2.sources.requestExtensionData({
        route: "refreshBearerToken"
    });
    console.log(response);
    return response;
}

Since this._store.refreshBearerToken returns a promise I wrapped the call in a from to convert it to an observable. This compiles but when it runs I get "Cannot read property 'pipe' of undefined".

How can I convert this promise to an observable so that I can refresh the token and then continue with the rest of the call?

Edit:

I am importing from via import { Observable, from } from "rxjs";.

So, I thought the error was coming from the line .pipe(flatMap(resp =>... but I was wrong. The error is coming from the method which is calling this.

GetInitialLinkList(): Observable<Institution[]>
{
    let base = { 'MemberId': localStorage.getItem('memberId') };
    let ins = localStorage.getItem("initialInstitutionList");
    if (ins)
    {
        return of(JSON.parse(ins));
    }
    return this._settingsService.get().pipe(
        flatMap(settings =>
        {
            this._settings = settings;
            return this._api.request<Institution[]>("Post", `${this._settings.mea}/GetInitialLinkList`, { body: base })
                .pipe(
                    retry(1),
                    catchError(this.handleError)
                )
                .pipe(flatMap(instList =>
                {
                    localStorage.setItem("initialInstitutionList", JSON.stringify(instList));
                    return of(instList);
                }))
        }));
}

and that is being subscribed to inside my component:

private GetLinkList()
{
    this.showWaiting.emit(true);
    this._data.GetInitialLinkList().subscribe((result) =>
    {
        this.initialList = result;
        this.showWaiting.emit(false);
    });
}

From what Brandon said (I forgot to return /facepalm...) I added the return so I have return from(this._store.refreshBearerToken()) which changed my error to 

ERROR Error Code: undefined
Message: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
defaultErrorLogger @ core.js:6014

Upvotes: 1

Views: 69

Answers (1)

Brandon
Brandon

Reputation: 39222

Can you show the actual error and the line in the code that the error occurs on? Also show where and how you import from.

I notice your code snippet does not return the observable it builds up via from(...).pipe(...) nor does it subscribe to it. It might help to show how your code actually uses this observable.

Upvotes: 1

Related Questions