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

Question

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

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

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

因此，正如您在此处看到的，此方法应返回可观察。它还在方法主体中执行一个存储方法，该方法返回一个承诺，其中包含使用 Bearer 令牌从服务器获取数据所需的结果数据。

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

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

重要的部分是我正在使用从"@ionic/存储"导入{存储}; 每当您使用 .get 方法时，它总是返回一个 Promise，这不是更改第三方核心代码的好做法。

问题是：编写此代码的最佳方式是哪种方式，因此每当我订阅可观察量时，我都会结合承诺和可观察量对用户进行身份验证？

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

干杯。

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

而且效果很好。我仍然不能说注释的解决方案不是一个好的(更好的实施实践)，但是由于有不同类型的情况，我想分享这种类型的解决方案。