Question

我在这里遇到了一个有趣的情况，我试图了解这是编写此代码的最佳方式。

我有一个服务，我用它来注入一个组件，从服务器获取数据，返回一个observable。这是代码：

getDataFromServer(): Observable<any> {
    this.storage.get('access_token').then((access_token) => {
        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization': 'Bearer ' + access_token });
        let options = new RequestOptions({ headers: headers }); 
    });

  return this.http.get(config.apiArticlesUrl, options)
  .map(this.extractData)
  .catch(this.handleError); 
}

所以你可以看到这个方法预计会返回Observable。它还有一个在方法体内执行的存储方法，它返回一个promise，其中包含使用Bearer令牌从服务器获取数据所需的结果数据。

现在，Typescript抱怨说，在这种情况下，由于范围问题，此时选项变量未定义。如果我在.then（函数）体之外定义了options变量，那么由于promise执行，所有时间选项变量都将为空，因此我可以对服务器进行身份验证。

如果我将return this.http.get(config.apiArticlesUrl, options).map(this.extractData).catch(this.handleError);放入.then(function{})正文中，那么TypeScript会抱怨Observable需要从此方法返回。

重要的是我使用了来自＆ion; @ ionic / storage＆＃39;的导入{存储}。无论何时使用.get方法，它总是返回一个Promise，这不是更改第三方核心代码的好习惯。

问题是：编写此代码的最佳方法是什么，所以每当我订阅Observable时，我都会让用户通过Promise和Observable进行身份验证？

我希望我能以正确的格式提出这个问题，以及是否可以分享一些链接，这些链接都是以一种非常有用的干净方式解释的。

干杯。

Answer 1

以下是我如何解决这个问题。

我重新构建了服务方法，如下所示：

  getDataFromServer(): Promise<any> {
      return this.storage.get('access_token').then((access_token) => {
             let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization': 'Bearer ' + access_token });
             let options = new RequestOptions({ headers: headers }); 

             return this.http.get(config.apiArticlesUrl, options);
     });
   }

我想要执行此操作的地方我已使用此代码：

this.dataService.getDataFromServer().then(
  (data) => {
    console.log("data:",data);
    data.subscribe((data)=>{
      console.log("This is the data : ", data);
    },
     (err) => console.log("err :",err)
    )
  },
     (err)=>console.log("err",err)
  )

它很棒。我仍然不能说评论的解决方案不是一个好的（更好的实践实践），但是因为有不同类型的情况我想分享这种类型的解决方案。

Angular2，TypeScript，Ionic 2代码执行顺序

1 个答案: