Angular service code refactoring

Question

我在我的應用程序中遵循這種格式來與API進行通信並從中獲取數據。

以下是我們現在使用cpd檢測應用程序的代碼複製從service.ts

getCheckoutDetails(): Observable<UserDetail> { 
    let query = `7668`; 
    return this.http 
     .get(this.appConfig.getAPIUrl() 
      + `/buy/getDetails?${query}`) 
     .map(this.extractData) 
     .catch(this.handleErrors); 
} 


private extractData(res: Response) { 
    let data = res.json();  
    return data.body ? data.body.message ? data.body.message : {} : {}; 
} 

private handleErrors(error: Response | any) { 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
} 

的一個代碼，並抱怨說，只要我使用extractData和handleErrors代碼是重複的。

有沒有更好的方法來處理這個使用基類？

Answer 1

您可以將您的方法的基類是這樣的：

class BaseService { 
    constructor(
    private http: Http, 
    @Inject(AppConfig) private appConfig: AppConfig) {} 

    get(url: string) { 
    return this.http 
      .get(`${this.appConfig.getAPIUrl()}${url}`) 
      .map(this.extractData) 
      .catch(this.handleErrors); 
    } 

    private extractData(res: Response) { 
    let data = res.json(); 
    return data.body ? data.body.message ? data.body.message : {} : {}; 
    } 

    private handleErrors(error: Response | any) { 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
    } 
} 

class DetailsService extends BaseService { 
    getCheckoutDetails() { 
    let query = '7668'; 
    return this.get(`/buy/getDetails?${query}`) } 
}