角度で共通のHTTPサービスを作成する

Question

私はAngularを初めて利用しており、すべてのコンポーネントのサービスを作成しています。このサービスは、サーバーからデータをフェッチするために使用されます。

私のクライアントが要求をオフラインに保存して後で同期するように指示しなくなるまで、すべてうまくいきました。

ここでは、サーバーに接続して既存のコンポーネント接続サービスではなくデータを取得する共通サービスを作成しました。

これがプロジェクトに影響するかどうかを知りたかったのですが、

この方法で問題が解決しない場合は、CommonRequestServiceでネットワーク接続を確認し、その要求をDBに保存します。

以下のコードを確認して元に戻してください。私は非常に感謝しています。 CommonRequestServiceが使用されている。ここエンジニアステータスサービス

export class engineerStatusService { 
    constructor(public http: Http) {} 
    // Post data to the server if user update the status 
    post(path: string, body: Object = {}): Observable <any> { 
     let headers = new Headers({ 
      'Content-Type': 'application/x-www-form-urlencoded', 
      'authorization': 'Bearer ' + localStorage.getItem('token') 
     }); 
     let options = new RequestOptions({ 
      headers: headers 
     }); 
     let data = body; 
     let urlSearchParams = new URLSearchParams(); 
     for (var key in body) { 
      urlSearchParams.append(key, body[key]); 
     } 

     let bodyData = urlSearchParams.toString(); 
     return this.http.post(`${API_URL}${path}`, bodyData, options) 
      .map(response => response.json()); 
    } 
} 

更新エンジニアステータスサービス

古いです。

export class engineerStatusService { 
    constructor(private commonRequestService: CommonRequestService) {} 
    // Post data to the server if user update the status 
    post(path: string, body: Object = {}): Observable <Response> { 
     let data = body; 
     let urlSearchParams = new URLSearchParams(); 
     for (var key in body) { 
      urlSearchParams.append(key, body[key]); 
     } 
     let bodyData = urlSearchParams.toString(); 
     return this.commonRequestService.post(path, bodyData) 
      .map(response => response.json()) 
    } 
} 

CommonRequestService

export class CommonRequestService { 
    constructor(private http: Http) {} 
    post(path: string, body: Object = {}): Observable <Response> { 
     let headers = new Headers({ 
      'Content-Type': 'application/x-www-form-urlencoded', 
      'authorization': 'Bearer ' + localStorage.getItem('token') 
     }); 
     let options = new RequestOptions({ 
      headers: headers 
     }); 
     return this.http.post(`${API_URL}${path}`, body, options) 
    } 
} 

エンジニア状況コンポーネント

updateStatus(data) { 
    this.engineerStatusService 
     .post('status', data) 
     .subscribe(data => { 
      console.log(JSON.stringify(data)); 
     }, error => { 
      console.log('Error occured =>', error); 
     }) 
} 

Answer 1

あなたはすでにそれをやったので、私は右、あなただけのサポートを必要とすると思いますか？

あなたは再びそれを行うために喜んでいる場合は、ここでは2点のあなたのためにリードしているので：

1 -

2は非常に強力ですが、最近のブラウザでservice workers、 - Http Interceptorsは、そのキャッチあらゆるあなたが作ることを要求し、それらを処理する前に何かをする。これは私があなたにお勧めする解決策です。強力で、組み込みで、少ないコード量しか必要としません。