Wait for a Promise before to get my Observable

Question

I want to do an Http Request with a token I took from storage. Basically with a synchronous function to get my token the code looks like:

import { Injectable } from '@angular/core';
import { Http, XHRBackend, Response, Request, RequestOptions, RequestOptionsArgs, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { StorageProvider } from '../../providers/storage/storage';

@Injectable()
export class SecureHttp extends Http {

  constructor(backend: XHRBackend, options: RequestOptions,
    private store: StorageProvider) {

    super(backend, options);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    let __token = this.store.getToken();

      // ... some verifications ...

    options.headers.set('Authorization', `Bearer ${__token}`);
    return super.request(url, options)
  }
}

I'm happy with that.. but when I changed my synchronous storage access with an asynchronous storage..:

public getToken(): Promise<string> {
  return this.storage.get('token');
}

and

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    this.store.getToken().then((token) => {
      options.headers.set('Authorization', `Bearer ${token}`);
      return super.request(url, options)
    });
  }

my compiler says:

[ts] A function whose declared type is neither 'void' nor 'any' must return a value.

Or

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    let __token;
    this.store.getToken().then((token) => {
      __token = token;
    });
    options.headers.set('Authorization', `Bearer ${__token}`);
    return super.request(url, options)
  }

__token is null when the request is performed.

How can I integrate my Promise in my Observable :) Thanks

Answer 1

Promise<string>

Once you depend on a promise to resolve, its going to be Promise based all the way up (Just like any other async process eg callbacks all the way up, observable all the way up) etc.

Fix

Change:

request(url: string | Request, options?: RequestOptionsArgs): 
  Observable<Response> {
      let __token = this.store.getToken();

To add Promise and async/await :

async request(url: string | Request, options?: RequestOptionsArgs): 
  Promise<Observable<Response>> {
      let __token = await this.store.getToken();

Answer 2

Thanks to @sam-herrmann & @than in this post https://stackoverflow.com/a/48664801/9115215 for the fromPromise

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return Observable.fromPromise(this.store.getToken()).concatMap((token) => {
      options.headers.set('Authorization', `Bearer ${token}`);
      return super.request(url, options)
    })
  }