Может ли событие загрузки загружаться в HttpInterceptor, но не из вызова HttpClient? - PullRequest
Новая
       47

Может ли событие загрузки загружаться в HttpInterceptor, но не из вызова HttpClient?

0 голосов
/ 02 июля 2018

Я использую HttpInterceptor, и у меня есть служба Http, которая вызывает методы http, работающие с HttpClient. Я пытаюсь получить прогресс загрузки и столкнулся с двумя проблемами здесь,

Во-первых, событие progress перехватывается только HttpInterceptor, а не любым из моих методов вызова Http в моем сервисе. похоже, что первый маскирует отчет о проделанной работе.

Во-вторых, значение прогресса всегда начинается с 100% и начинает приращение.

Я лениво загружаю свой модуль, HttpInterceptor зарегистрирован на уровне app.module.

Как я могу получить значение прогресса из метода http?

мой HttpInterceptor сервис выглядит, 

if (req.url.search('https') < 0) {
      const headers = new HttpHeaders({
        Accept: 'application/json',
        Authorization: `Bearer ${this.authService.getToken()}`,
        'X-XSRF-TOKEN': `${this.authService.getAntiforgeryToken()}`,
        ClientTimeZoneOffest: `${new Date().getTimezoneOffset()}`,
        ClientTimeZoneId: Intl.DateTimeFormat().resolvedOptions().timeZone,
        ClinetLogInId: `${this.authService.getLogInId()}`,
      });
      const cloneReq = req.clone({ headers });
      return next.handle(cloneReq).pipe(
        mergeMap((ev: HttpEvent<any>) => {
          if (ev.type === HttpEventType.UploadProgress) {
            const percentDone = Math.round((100 * ev.loaded) / ev.total);
            console.log(`File is ${percentDone}% uploaded.`);
          }
          this.httpResponseHandlerService.handleSuccessResponse(ev);
          return Observable.of(ev);
        }),
        catchError(error => {
          this.httpResponseHandlerService.handleErrorResponse(error, req);
          return Observable.throw(error);
        }),
      );
    } else {
      return next.handle(req);
    }
  }

мой Http-сервис, 

public upload<T>(apiUrl: string, jsonData: {} = {}) {
    return this.httpService.post<T>(this.baseUrl + apiUrl, jsonData, {
      reportProgress: true,
    });
  }

и метод, в котором я пытаюсь добиться прогресса, подобен 

this.httpService
        .upload(this.api + this.id.value, data)
        .takeUntil(this.unsubscribe)
        .subscribe((ev: HttpEvent<any>) => { // Nothing is happening here!
          if (ev.type === HttpEventType.UploadProgress) {
            const percentDone = Math.round((100 * ev.loaded) / ev.total);
            console.log(`File is ${percentDone}% uploaded.`);
          }
        });

Прогресс поведения,

enter image description here

1 Ответ

0 голосов
/ 02 июля 2018

Неправильный способ выполнения запроса, пожалуйста, обратитесь к http://angular.io/guide/http#listening-to-progress-events

Вы должны создать HttpRequest, затем вызвать this.http.request(req) вместо this.http.post(...)

http.post - это просто сокращение для выполнения обычного http-запроса на http.request. Для полных опций создания запросов, например, когда мы хотим загружать или выгружать с отслеживанием прогресса, вы должны использовать http.request (где вы вручную создаете объект запроса со многими опциями, а затем выполняете его).

Также цитата из документа:

// API HttpClient.request создает необработанный поток событий

// который включает события запуска (отправлено), хода выполнения и ответа.

Кстати, не рекомендуется помещать обработку прогресса загрузки в HttpInterceptor, так как его эффект распространяется на весь проект, то есть каждый ваш запрос будет проходить через перехватчик. И вам не нужна обработка прогресса в каждом запросе?

...