Common HTTP-Dienst in Winkel erstellen

Question

Ich bin neu in Angular und ich habe Dienste für jede Komponente erstellt. Der Dienst wird zum Abrufen von Daten vom Server verwendet.

Es war alles in Ordnung, bis mein Client mir nicht gesagt hat, die Anfrage offline zu speichern und später zu synchronisieren.

Jetzt habe ich einen gemeinsamen Dienst erstellt, der den Server trifft und die Daten anstelle von vorhandenen komponentengebundenen Diensten erhält.

Ich wollte wissen, ob dies irgendeine Sache im Projekt beeinflussen wird oder nicht.

Wenn dieser Ansatz in Ordnung ist, dann werde ich die Netzwerkverbindung in CommonRequestService überprüfen und die Anfrage in DB speichern.

Bitte überprüfen Sie den folgenden Code und kehren Sie zurück. Ich werde sehr dankbar sein.

Ältere Ingenieur Status Service

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

Aktualisiert Ingenieur Status Service

Hier die CommonRequestService verwendet wird.

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

Ingenieur Status Bestandteil

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

Answer 1

Da Sie es bereits getan hat, ich glaube, Sie brauchen Unterstützung, nicht wahr?

Denn wenn Sie bereit sind, es wieder zu tun, hier sind zwei Leitungen für Sie:

1 - Die service workers, auf neueren Browsern, die sehr mächtig sind

2-Http Interceptors, dass Fang jeder fordern Sie an, und machen Sie etwas, bevor Sie sie verarbeiten. Dies ist die Lösung, die ich Ihnen empfehle: Sie ist leistungsstark, integriert und benötigt weniger Code.