Как узнать ход выполнения запроса в каждом http-запросе в Ionic и Angular - PullRequest
Новая
       36

Как узнать ход выполнения запроса в каждом http-запросе в Ionic и Angular

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

У меня нет кода для отображения в этом вопросе. Я пытаюсь погуглить, если кто-то уже создал эту функцию с документацией. Я также попытался выяснить, не задал ли кто-то этот вопрос, но ему не повезло.

Это похоже на загрузку и выгрузку файлов с индикатором выполнения, но это работает только при загрузке / выгрузке файлов, но как я могу расставить точки в простом любом запросе post / put / delete к бэкэнду.

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

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

Я знаю, что это будет сделано в JavaScript и некоторых CSS и HTML или XML.

Я нашел один вопрос или проблему с axios со ссылкой на вопрос или вопрос прямо здесь .

Но как я могу сделать это Angular или Ionic, используя http или httpClient в последней версии.

Есть предложения?

1 Ответ

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

Я официально нашел решение для этого. После внимательного прочтения и понимания использования http-events с помощью этой статьи . В конце концов я понял, что пишу код записи, который я не очень хорошо тестировал, потому что я не использовал загрузку файлов, поэтому прогресс http был таким быстрым.

Итак, вот пример того, что я сделал.

В моем provider.ts 

publishSomeAPI(data) {
    const req = new HttpRequest('POST', `${url}/someAPIEndpoint`, data, {
      // headers: You can put your headers type hear such as content/type, token...
      reportProgress: true
    });

    return new Promise((resolve, reject) => {
      this.http.request(req).subscribe((event: HttpEvent<any>) => {
        switch (event.type) {
          case HttpEventType.Sent:
            console.log('Request sent!');
            this.getHttpEvent().next(event);
            break;
          case HttpEventType.ResponseHeader:
            console.log('Response header received!');
            this.getHttpEvent().next(event);
            break;
          case HttpEventType.UploadProgress:
            this.getHttpEvent().next(event);
            const percentDone = Math.round(100 * event.loaded / event.total);
            console.log(`Posting in progress! ${percentDone}% \n
            Bytes being upload: ${event.loaded} \n
            Total no. of bytes to upload: ${event.total}`);
            break;
          case HttpEventType.Response:
            this.getHttpEvent().next(event);
            console.log('Done!', event.body);
            resolve(event);
        }
      }, err => {
        console.log(err);
        reject(err)
      });
    });
  }

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

В верхней части моего файла provider.ts . 

private httpEventListener: Subject<Object> = new Subject<Object>();
  observeHttp: Observable<Object> = this.httpEventListener.asObservable();

ниже. * * Тысяча двадцать-одна 

  getHttpEvent(): Subject<Object> {
    return this.httpEventListener;
 }

После того, как вы создали наблюдаемое в вашем service-provider.ts , теперь вы можете начать слушать эту наблюдаемую базу по событию http, которое выполняется или запрашивается.

Теперь в вашем page.ts импортируйте сервис или провайдер , где вы создали наблюдаемое, и поместите этот код ниже в конструктор или любое другое событие жизненного цикла, которое вы хотите выполнить. 

this.someService.observeHttp.subscribe(data => { console.log(`An http event happened: ${JSON.stringify(data, null, '\t')}`) })

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

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

ПРИМЕЧАНИЕ: Используйте загрузку файлов с простыми текстовыми данными вместо просто небольших текстовых данных, потому что небольшие куски данных без файла всегда будут возвращать 100% при подключении к сети или NaN без подключения даже на низком или среднем уровне. устройства.

...