Is it possible somehow call async Ionic Storage synchronously?

Question

I'm trying to create a class for working with API on top of Angular2 HTTP class. The main thing is that I need to add custom auth header which is available after user authorized.

The main problem is that the token is stored in Ionic Storage module from which it can be only be obtained asynchronously, but I need to return the specific type....

export class APIRequest extends Http {

    private storage : Storage;

    constructor (backend: XHRBackend, options: RequestOptions) {
        super(backend, options);

        this.storage = new Storage;
    }

    request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
        if (typeof url === 'string') {
            url = AppConfig.API_SERVER + url
        } else {
            url.url = AppConfig.API_SERVER + url.url
        }

        this.storage.get('authToken').then(token => {
            if (typeof url === 'string') {
                if (!options) {
                    options = {headers: new Headers()};
                }

                options.headers.set('Authorization', `Bearer ${token}`);
            } else {
                url.headers.set('Authorization', `Bearer ${token}`);
            }
            // Here I need to return 
        }, err => {
            // throw some error
        })

        return super.request(url, options).catch(this.catchAuthError(this));
    }
}

So basically I need somehow to put return super.request(url, options)... to the promise of the storage and return when i get that token.

why cant you use ``return storage.get().then(fn).then( token => { return super.request() }) `` — raj, Dec 13 '16 at 11:52
not an expert on ``Observables`` but how about making an observable out of promise with ``fromPromise`` and then using ``flatMap`` to return ``request`` observale. — raj, Dec 13 '16 at 12:06

score 5 · Answer 1 · edited May 23 '17 at 11:46

Close to being a duplicate. (Couln't find it)

At least, the answer can be applied to the same problem. If you want to keep the returning Observable a fix would be to convert your Promise (this.storage.get) to an Observable.

After, you can use a operator like flapMap to return the value of super.request.

(Note: Compiler doesn't understand that it's returning a Response now, so change return type to Observable<any> (will still return Response))

export class APIRequest extends Http {

    private storage : Storage;

    constructor (backend: XHRBackend, options: RequestOptions) {
        super(backend, options);

        this.storage = new Storage;
    }
    // any return type (will return Response object but compiler doesn't understand that)
    request(url: string|Request, options?: RequestOptionsArgs): Observable<any> {
        if (typeof url === 'string') {
            url = AppConfig.API_SERVER + url
        } else {
            url.url = AppConfig.API_SERVER + url.url
        }

        //convert the Promise to an Observable
        val storageObservable = Observable.fromPromise(this.sotrage.get('authToken'));

        // rxjs/add/operator/mergeMap
        return storageObservable.flatMap(token => {
            if (typeof url === 'string') {
                if (!options) {
                    options = {headers: new Headers()};
                }

                options.headers.set('Authorization', `Bearer ${token}`);
            } else {
                url.headers.set('Authorization', `Bearer ${token}`);
            }
            // the value that will be returned
            return super.request(url, options).catch(this.catchAuthError(this));
        }, err => {
            // throw some error
        })


    }
}

Useful links:

documentation from reactivex.io . For instance, for flatMap: http://reactivex.io/documentation/operators/flatmap.html
Why we need to use flatMap?

@raj thanks for pointing out! You're right, edited the answer — Ivar Reukers, Dec 13 '16 at 12:26
@Ivaro18 sorry for delay, but just tested... There is an error `TypeError: Cannot read property 'json' of undefined(…)` when trying to do the request. I think because it returns not `Response` — user1692333, Dec 14 '16 at 10:34

Is it possible somehow call async Ionic Storage synchronously?

1 Answers1