Парсинг результата в Angular 5+, как правильно?

Question

[beta-it]

Всем доброго дня.
От сервера приходят данные но обернутые в собственный формат ответа:

{
  success: boolean; // статус выполнения запроса
  data: any | null; //здесь может вернуться любой объект/массив объектов/null/пустые объект или массив
  msg: string | null; // текст ошибки либо null в случае успеха
}

Т.е. все данные приходят в data...

Как поступаю сейчас:
Сделал интерфейс:

export interface IResponse<T> {
  success: boolean;
  data: T | null;
  msg: string | null;
}

И сделал функцию обработчик:

getDataResponse<T>(response: IResponse<T>) {
    if (response && response.data) {
      return response.data;
    } else {
      return null;
    }
  }

Ну и собственно в провайдерах вызываю все это следующим образом:

/**
   * Получение информации об авторизованном пользователе
   * @param {number} id
   * @returns {Observable<IUser>}
   */
  public getUserInfo(id: number): Observable<IUser> {
    const url = `${env.url}/${id}/info`;

    return this.httpClient
      .get(url)
      .pipe(
        map((response: IResponse<IUser>) => this.getData(response))
      );
  }

Как поступить с таким возвратом от сервера? Возможно есть лучше/правильней решение?

Answer 1

[Ivan Stroykin]

Опишите Http Interceptor, который будет перехватывать ответ, проделывать манипуляции и отдавать уже в нужном вам формате. Примеры можно найти, загуглив: "angular 5 http interceptor response"

Answer 2

[Demian Smith]

Когда будите работать над Http Interceptor, как посоветовал Ivan Stroykin, проработайте обработку ошибок как следует. Интерсептор не должен возвращать null в случае ошибки. Он должен делать return Observable.throw(error).

Еще одно общее наблюдение: старайтесь функции, не использующие this выносить в отдельный файл (не сервис). Т.е. делать как-то так:

// get-data-response.ts
export function getDataResponse<T>(response: IResponse<T>) {
    if (response && response.data) {
      return response.data;
    } else {
      return null;
    }
  }

Так намного больше шансов на то что функция будет переиспользована где-то еще и не захламлена ненужными подробностями. Да и юнит-тестировать такой код гораздо проще.

Comments

[beta-it]

Эта функция была больше для тестов, в любом случае бы вынес в отдельный файл т.к. провайдеров много..., но все равно спасибо за полезное замечание.

[beta-it]

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
      .handle(req)
      .pipe(
        map((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
              return event.clone({
                body: event.body.data
              });
            }
            return event;
          }
        ),
        catchError((error: HttpEvent<any>) => {
          if (error instanceof HttpErrorResponse) {
            const url = error.url ? error.url : '';
            const newError = new HttpErrorResponse({
              error: error.error.data,
              status: error.status,
              statusText: error.statusText,
              url: url
            });
            return throwError(newError);
          }
          return throwError(error);
        })
      );
  }

Сделал таким образом...

[Demian Smith]

beta-it, лучше так

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
      .handle(req)
      .pipe(
        map((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
              return event.clone({
                body: event.body.data
              });
            }
            return event;
          }
        ),
        catchError((error: HttpEvent<any>) => {
          if (error instanceof HttpErrorResponse) {
            return throwError(error.clone({
                error: error.error.data,
                url: error.url || ''
              }));
          }
          return throwError(error);
        })
      );
  }

[beta-it]

Demian Smith, так уже пробовал:
Error:(38, 37) TS2339: Property 'clone' does not exist on type 'HttpErrorResponse'.