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