Extract data from Angular http service

Question

I need the service to return a promise keeping status etc. plus having the response data as object both for success and error callbacks.

Is there a suggested way? This is what I currently do (and works):

return this.http.get(url)
   .map(res => this.commonService.extractData(res))
   .toPromise()
   .catch(res => this.commonService.handleError(res));

CommonService:

  extractData(res: Response): Response {
    res.data = res.text() ? res.json() : null;
    return res;
  }

  handleError(res: Response): Response {
    res.data = res.text() ? res.json() : null;
    return Promise.reject(res);
  }

Jota.Toledo · Accepted Answer · 2017-06-13 15:43:33Z

1

For observables, I capsulated the extract/handle error functions inside of a utils.ts file. The functions are defined as follows:

/**
 * Extracts the information received as response from a HTTP request
 * @param res a HTTP response
 */
export const extractData = (res: Response) => {
    const body = res.json();
    return body || {};
};

/**
 * Handles a possible error in the response of an HTTP request
 * @param error a HTTP response with error status code
 */
export const handleError = (error: Response | any): Observable<string> => {
    let errMsg: string;
    if (error instanceof Response) {
        const body = error.json() || '';
        const err = body.message || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} Details: ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    return _throw(errMsg);
};

When I export them, I can use them directly as method parameters in map/catch. For example:

getPlant(id: string): Observable<IPlantDetail> {
    return this._http.get(`${this._endPoint}/${id}`)
      .map(extractData)
      .catch(handleError)
      .delay(300);
  }

Most likely you could do the same for promises.

Hope it helps

edited Jun 13, 2017 at 15:43

answered Jun 13, 2017 at 15:37

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Olezt Over a year ago

Thank you for your answer. This is very close to what I already do. So the idea to use first map() and then catch() to add the data property to response is acceptable, right?

Jota.Toledo Over a year ago

More or less, map will be executed, as long as the internal observable returned from htt.get(...) does not throw an error

Collectives™ on Stack Overflow

Extract data from Angular http service

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related