각도로 일반 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

, 나는 당신이 단지 바로 지원이 필요한 것 같아요?

다시 그것을 할 의향이 있다면, 여기이 당신을 위해 리드 때문에 :

1 -

이 매우 강력 최근의 브라우저에 service workers, - Http Interceptors는, 그 캐치 모든 당신이 요청하고, 처리하기 전에 뭔가를하십시오. 이것은 내가 당신에게 권장하는 해결책입니다 : 강력하고, 내장되어 있으며, 적은 양의 코드가 필요합니다.