Как хранить объекты HTTPErrorResponse из нескольких HTTP-запросов в массиве? - PullRequest
Новая
       21

Как хранить объекты HTTPErrorResponse из нескольких HTTP-запросов в массиве?

0 голосов
/ 17 июня 2019

Я пытаюсь создать валидатор API в моем приложении Angular. У меня есть список URL-адресов, которые мне нужно получить или POST, и хранить любые ошибки HTTP в массиве, который затем будет отображаться в пользовательском интерфейсе.

Я реализовал следующий сервис для этого: 

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { DataSource, ConfigValidationErrorObject } from './customTypes';

@Injectable()
export class ApiValidationService {
  apiValidationErrors: Array<ConfigValidationErrorObject> = new Array<ConfigValidationErrorObject>();

  constructor(
    private _httpClient: HttpClient,
  ) { }

  validate(dataSourceArray: Array<DataSource>): Array<ConfigValidationErrorObject> {
    dataSourceArray.map((url) => { this.validateApi(dataSource) });

    return this.apiValidationErrors;
  }

  validateApi(dataSource: DataSource) {
    if (dataSource.httpRequestType === 'GET') {
      this.executeGetRequest(dataSource.url, dataSource.options).subscribe(
        (data) => console.log(data),
        (error: HttpErrorResponse) => {
          this.addApiValidationError(error);
        }
      );
    }

    if (dataSource.httpRequestType === 'POST') {
      this.executePostRequest(dataSource.url, dataSource.body, dataSource.options).subscribe(
        (data) => console.log(data),
        (error: HttpErrorResponse) => {
          this.addApiValidationError(error);
        }
      );
    }
  }

  executeGetRequest(url: string, options: any) {
    return this._httpClient.get(url);
  }

  executePostRequest(url: string, body: any, options: any) {
    return this._httpClient.post(url, body, options);
  }

  addApiValidationError(httpErrorResponse: HttpErrorResponse) {
    const apiValidationError: ConfigValidationErrorObject = {
      message: httpErrorResponse.message,
    };

    this.apiValidationErrors.push(apiValidationError);
  }
}

Когда я использую метод validate() в своем компоненте, я хочу, чтобы возвращаемый массив заполнялся моими объектами ошибок. Но я получаю пустой массив обратно, даже когда появляются ошибки (они правильно записываются на консоль). Я ожидаю, что это из-за асинхронных HTTP-запросов.

Я читаю Observables, но я не уверен, что смогу их использовать, потому что мне нужны объекты ошибок, а не данные, возвращаемые из HTTP-запросов. Я хочу знать, нужно ли мне использовать Observables или я должен смотреть на Promises? Если мне нужно использовать Observables, кто-нибудь может помочь мне начать с ней для моей проблемы.

Я довольно плохо знаком с Angular, поэтому мне сложно решить, как решить эту проблему. Любые предложения будут оценены.

1 Ответ

2 голосов
/ 17 июня 2019

Я бы сказал так: 

forkJoin(
  getCallOne()
    .pipe(map(() => null), catchError(error => {/* what you want to do here */})),
  getCallTwo()
    .pipe(map(() => null), catchError(error => {/* what you want to do here */})),
  postCallOne()
    .pipe(map(() => null), catchError(error => {/* what you want to do here */})),
  PostCallTwo()
    .pipe(map(() => null), catchError(error => {/* what you want to do here */})),
).pipe(
  map(errors => errors.filter(error => !!error))
)

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

  • forkJoin создает массив наблюдаемых и выдает только тогда, когда все вызовы завершены
  • сопоставляет ответы с null , потому что вы не будете его использовать (по-видимому,)
  • используйте catchError , чтобы перехватить ошибку и вернуть ее в качестве действительной наблюдаемой
  • map окончательных ошибок для фильтрации только ошибок (удаление null значения действительных вызовов)
...