角度服务代码重构

时间:2017-10-06 09:56:01

标签: angular typescript optimization

我在我的应用程序中遵循这种格式与API通信并从中获取数据。

以下是其中一个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);
} 

现在我们正在使用 cpd 来检测应用程序中的代码重复,并且它抱怨无论我在哪里使用 extractData 代码重复。

有没有更好的方法来使用基类来处理它?<​​/ p>

1 个答案:

答案 0 :(得分: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}`) }
}