【问题标题】:Return Resolved Observable from Inside of a Promise从 Promise 内部返回已解决的 Observable
【发布时间】:2017-04-15 10:08:24
【问题描述】:

我正在尝试通过扩展默认值来构建自定义 Angular 2 http 请求,并且我正在使用 Ionic 2 本地存储来存储身份验证令牌。 (将来可能会使用文件系统)。我的问题是如何从我的 http 服务返回已解决的承诺,以便我可以订阅组件中的 Observable。我尝试过 Observable.fromPromise 和其他变体均无济于事。

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);
  });

}

想法基于这篇博文,但离子存储返回了一个承诺。 http://www.adonespitogo.com/articles/angular-2-extending-http-provider/

【问题讨论】:

  • 谁是user
  • 应该是token。
  • then里面处理observable不太方便。我想应该是return Observable.fromPromise(this.storage.get('token')).map(token =&gt; { ...; return url }).mergeMap(url =&gt; super.request(...))
  • 当你使用fromPromise时会发生什么?
  • 可能做错了什么,但通常需要返回一个 Observable。

标签: angular typescript local-storage ionic2


【解决方案1】:

我不知道该存储是否返回与 Rx 兼容的承诺,但如果是,则解决方案应如下所示:

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));

        });
    });

}

如果 promise 与 observables 不兼容,仍然有办法做到这一点,尽管它不是那么优雅:

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);
        });

    });

}

【讨论】:

  • 第一个选项有效,谢谢!。我之前没有使用平面地图。还需要添加 import 'rxjs/add/operator/mergemap';让平面图工作。
猜你喜欢
  • 2016-12-28
  • 1970-01-01
  • 2017-10-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-12
  • 2018-03-12
  • 2017-09-11
相关资源
最近更新 更多