Angular2、TypeScript、Ionic 2 代码执行顺序答案

【问题标题】：Angular2, TypeScript, Ionic 2 code execution orderAngular2、TypeScript、Ionic 2 代码执行顺序
【发布时间】：2017-09-04 18:21:49
【问题描述】：

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

我有一个服务，我用它来注入一个组件以从服务器获取数据，该服务器返回一个 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。它还在方法主体内执行了一个存储方法，该方法返回一个带有结果数据的承诺，该数据需要使用不记名令牌从服务器获取数据。

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

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

重要的是我正在使用 import { Storage } from '@ionic/storage'; 每当您使用 .get 方法时，它总是返回一个 Promise，这不是更改 3rd 方核心代码的好习惯。

问题是：编写此代码的最佳方式是什么，所以每当我订阅 Observable 时，我都会结合 Promise 和 Observable 获得用户身份验证？

我希望我以正确的格式提出问题，如果可以分享一些链接，其中所有内容都以简洁的方式进行了解释，这将非常有用。

干杯。

【问题讨论】：

你不应该同时使用 Observable 和 Promise，因为它们都是两个端点。如果您需要更多信息，请告诉我，您可以在此 answer 中查看最佳方式
我刚刚快速更新了我的问题。我认为我无法实施您刚刚与我分享的解决方案，因为在这种情况下我无法从 @ionic/storage 模块更改第 3 方代码（存储）。
您可以使用使用方式和通用方式处理服务

标签： angular typescript ionic2

【解决方案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)
  )

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

【讨论】：