Ian Hoar Ian Hoar - 8 days ago 4
TypeScript Question

Return Resolved Observable from Inside of a Promise

I'm trying to build a custom Angular 2 http request by extending the default and I'm using Ionic 2 local storage to store the auth token. (Will likely use file system in future). My issue is how to return a resolved promise from my http service so I can subscribe to the Observable within my component. I've tried Observable.fromPromise and other variations to no avail.

request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {

// Get the token used for this request.
// * Need to return this promise resolved.
var promise = this.storage.get('token').then(token => {

if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
if (!options) {
// let's make option object
options = {headers: new Headers()};
}
options.headers.set('Authorization', 'Basic ' + token);
} else {
// we have to add the token to the url object
url.headers.set('Authorization', 'Basic ' + token);
}

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

}).catch(error => {
console.log(error);
});

}


Ides is based on this blog post, but Ionic storage returns a promise. http://www.adonespitogo.com/articles/angular-2-extending-http-provider/

Answer

I don't know if that storage returns a promise which is compatible with Rx, but if it is then the solution should look like this:

request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {

    return Observable
        .fromPromise(this.storage.get('token'))
        .flatMap(token => {

            if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
                if (!options) {
                    // let's make option object
                    options = {headers: new Headers()};
                }
                options.headers.set('Authorization', 'Basic ' + token);
            } else {
                // we have to add the token to the url object
                url.headers.set('Authorization', 'Basic ' + token);
            }

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

        });
    });

}

If promise is not compatible with observables there's still a way to do that, though it's not that elegant:

request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {

    return Observable.create((observer: Observer) => {

        this.storage.get('token').then(token => {

            if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
                if (!options) {
                    // let's make option object
                    options = {headers: new Headers()};
                }
                options.headers.set('Authorization', 'Basic ' + token);
            } else {
                // we have to add the token to the url object
                url.headers.set('Authorization', 'Basic ' + token);
            }

            super.request(url, options).catch(this.catchAuthError(this)).subscribe(result => {
                observer.next(result);
                observer.complete();
            });

        }).catch(error => {
            observer.error(error);
        });

    });

}