Могу ли я использовать закусочную внутри моего сервиса?

Question

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

например. если ошибка http, которая возвращается 422, я хочу показать дружелюбное сообщение.

Итак, вот мой класс обслуживания:

@Injectable()
export class TransactionService {

  private baseUrl = 'http://foo.bar/api';
  private body;
  private headers;
  private options;

  constructor(private http: HttpClient, private snackBar: MatSnackBar) {

  }

  openSnackBar(message: string) {
    this.snackBar.open(message, null, {duration: 5000});
  }

  errorHandler(error: HttpErrorResponse) {

    console.log(error.status);
    if (error.status === 422) {
      this.openSnackBar('Number already exists');
    } else {
    return Observable.throw(error.message || 'Server Error');
    }
  }

  SubmitTransaction(transactionRequest: ITransactionRequestObj): Observable<TransactionResponse> {
    this.body =  JSON.stringify(transactionRequest);
    this.headers = new HttpHeaders().set('Content-Type', 'application/json');
    this.headers.append('Accept', 'application/json');
    this.options = new RequestOptions({headers: this.headers});
    console.log(JSON.stringify(transactionRequest));
    return this.http.post<TransactionResponse>(this.baseUrl + '/transactions/new',  this.body, this.options)
                .catch(this.errorHandler);
  }

}

Я сделал console.log и вернул правильный номер статуса ошибки при ошибке 422. Тем не менее, закусочная не появится, потому что вместо этого я получаю эту ошибку:

core.js:1448 ERROR TypeError: this.openSnackBar is not a function
    at CatchSubscriber.TransactionService.errorHandler [as selector] (transaction.service.ts:49)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at FilterSubscriber.Subscriber._error (Subscriber.js:131)
    at FilterSubscriber.Subscriber.error (Subscriber.js:105)
    at MergeMapSubscriber.OuterSubscriber.notifyError (OuterSubscriber.js:24)
    at InnerSubscriber._error (InnerSubscriber.js:28)
    at InnerSubscriber.Subscriber.error (Subscriber.js:105)
    at XMLHttpRequest.onLoad (http.js:2283)

Это потому, что я не должен / не могу использовать закусочную внутри моего сервиса (только компоненты?)?

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

Вот вызов службы внутри моего класса компонентов:

this._transactionService.SubmitTransaction(this.transactionObj).subscribe(data => {
        if (data._errorDetails._status === '201') {
          //do some action 
        }
      }, (err) => {
        console.log(err);
        if (err.status === 422) { //also tried this inside my component err.status is undefined. However err is the server error message.
        //do some action 
        }
      });

Answer 1

Полагаю, вам нужно связать правильный контекст this, чтобы он работал:

.catch(this.errorHandler.bind(this));

Или вы также можете использовать эти опции:

.catch((e) => this.errorHandler(e));

или функция локальной жирной стрелки:

errorHandler = (error: HttpErrorResponse) => {
  ...
}

Подробнее см .:

• https://github.com/Microsoft/TypeScript/wiki/%27this%27-in-TypeScript