2017-04-09 10 views
1

私はこのコードを記述するための最良の方法であるかを理解しようとしている、ここで興味深いの状況を持っています。Angular2、活字体、イオン2のコードの実行順序

私は私が観察を返すサーバーからデータをフェッチするためにコンポーネントに注入するために使用するサービスを持っています。ここで コードです:あなたがここに見ることができるように

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

この方法は、観察可能な返すことが期待されます。また、メソッド本体内で実行される記憶方法があり、ベアラトークンを使用してサーバーからデータをフェッチするために必要な結果データで約束を返します。

さて、活字体は、この場合にはオプションの変数が原因スコープ問題のこの時点では未定義されていることを訴えます。 .then(関数)本体の外側にoptions変数を定義すると、promise実行のためにすべてのtimeオプション変数が空になり、そのためにサーバーに対して認証することができます。

.then(function{})体内にreturn this.http.get(config.apiArticlesUrl, options).map(this.extractData).catch(this.handleError);を入れた場合、オブザーバブルはこのメソッドから戻る必要があると文句を言います。

重要な部分は、私はからのインポート{ストレージ}を使用しているということである「@イオン/ストレージ」; .getメソッドを使用するたびに常にサードパーティのコアコードを変更するのは良い方法ではないPromiseを返します。

質問です:私が観測をサブスクライブするたびに私は、ユーザーが約束して観測を組み合わせて認証されます。このコードを書くための最良の方法はどれ?

私は適切なフォーマットで質問をし、それが、これはすべての非常に有用であろうクリーンな方法で説明されているいくつかのリンクを共有することができます場合だ願っています。

乾杯。

+0

ObservableとPromiseは、両方とも2つのエンドポイントであるため、一緒に使用しないでください。この[**回答**]の中で最良の方法を見ることができます(http://stackoverflow.com/questions/43305876/set-global-data-to-property-from-get-request-before-continue/43307401# 43307401)もっと情報が必要な場合 – Aravind

+0

私はすぐに私の質問を更新しました。 @ ionic/storageモジュールからこのケース(ストレージ)のサードパーティコードを変更することはできないので、あなたが私と共有したソリューションを実装することはできません。 – Rambo

+0

あなたはサービスの使い方と一般的な使い方を使うことができます – Aravind

答えて

0

ここで、この問題をどのように解決したかを説明します。

私はこのように見てサービスメソッドを再構築してきました

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

そして、それは動作しますすばらしいです。それでも、このタイプのソリューションを共有したい状況のタイプが異なるため、コメントされたソリューションは良い(実装する方が良い)とは言えません。