Angular 6 Как определить пользовательскую функцию отладки в Angular Observable - PullRequest
Новая
       21

Angular 6 Как определить пользовательскую функцию отладки в Angular Observable

0 голосов
/ 06 ноября 2018

Только что возник вопрос по созданию пользовательской отладки

Я следовал учебному руководству для пользовательской отладки, ниже приведен код 

import {Observable} from 'rxjs/index';
import {environment} from '../../environments/environment';

declare module 'rxjs/internal/Observable' {
  interface Observable<T> {
    debug: (...any) => Observable<T>;
  }
}

Observable.prototype.debug = (message: string) => {
  return this.do(
    (next) => {
      if (!environment.production) {
        console.log(message, next);
      }
    },
    (err) => {
      if (!environment.production) {
        console.error('ERROR >>', message, err);
      }
    },
    () => {
      if (!environment.production) {
        console.log('Completed - ');
      }
    }
  );
};

Когда я использую отладку в сервисе, она выдала мне эту ошибку

this.httpClient.get (...). Pipe (...). Debug не является функцией at QuoteService.push ../ src / app / services / quote.service.ts.QuoteService.getQuote (quote.service.ts: 19) 

export class QuoteService {

  constructor(@Inject('BASE_CONFIG') private config,
              private httpClient: HttpClient) { }

  getQuote(): Observable<Quote> {
    const uri = `${this.config.uri}/quotes/${Math.floor(Math.random() * 10)}`;
    return this.httpClient.get(uri)
      .pipe(map((res: Quote) => res as Quote))
      .debug('quote: ');
  }
}

когда я оборачиваю отладку в трубу (), она просто говорит

ОШИБКА ReferenceError: отладка не определена

Понятия не имею, как это решить, у кого-нибудь есть идея?

Спасибо за любые комментарии

1 Ответ

0 голосов
/ 06 ноября 2018

подход к отладке, описанный выше, исходит от Angular 4, который в Angular 6 я предложил более понятным и простым способом

посмотрите код: 

import {pipe} from 'rxjs/index';
import {environment} from '../../environments/environment';
import {tap} from 'rxjs/internal/operators';

export const debug = (message: string) => pipe(
  tap(
    (next) => {
      if (!environment.production) {
        console.log(message, next);
      }
    },
    (err) => {
      if (!environment.production) {
        console.error('ERROR >>', message, err);
      }
    },
    () => {
      if (!environment.production) {
        console.log('Completed - ');
      }
    }
  )
);

, а затем может быть использован в любом месте, если необходимо связать оператором трубы 

getQuote(): Observable<Quote> {
    const uri = `${this.config.uri}/quotes/${Math.floor(Math.random() * 10)}`;
    return this.httpClient.get(uri)
      .pipe(debug('quote: '), map((res: Quote) => res as Quote));
  }

Так просто, как есть

...