Динамически отображать элемент при запросах HttpClient

#aurelia

Вопрос:

Я хочу отображать загрузчик для каждой выборки, выполняемой моим приложением, не позволяя пользователю отправлять один и тот же запрос несколько раз. Для этого я изменил конфигурацию HttpClient, чтобы перехватывать запросы и ответы во время настройки в main.ts

     let httpClient = new HttpClient();

    httpClient.configure(config => {
       config.withInterceptor({
            request(request) {
                // displayLoader();
                return request;
            },
            response(response) {
                // hideLoader();
                return response;
            },
        });
    });

Если бы это был простой js, я бы сделал что-то вроде document.body.appendChild… но Aurelia не позволяет мне этого делать.

Есть ли способ динамического отображения пользовательского представления без изменения маршрута или необходимости вставлять новое представление загрузки для каждого компонента, выполняющего запрос?

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

1. Я имею в виду, что Aurelia не останавливает вас от использования document.appendChild , она просто настоятельно не рекомендует вам ее использовать.

2. да, я чувствовал себя плохо из-за прямого доступа к DOM, я просто тестировал некоторые параметры, но у appendChild было странное поведение в моей реализации. Я придерживаюсь лучших практик, спасибо.

Ответ №1:

Вот вариант, который может вам подойти. В вашем main.js , есть что-то похожее на это:

 import {HttpClient} from 'aurelia-fetch-client';
import {EventAggregator} from 'aurelia-event-aggregator';

export function configure(aurelia) {
  const container = aurelia.container;

  const httpClient = container.get(HttpClient);
  const ea = container.get(EventAggregator);

  httpClient.configure(config => {
    config.withInterceptor({
      request(request) {
        ea.publish('http-request', request);
        return request;
      },
      response(response) {
        ea.publish('http-response', response);
        return response;
      }
    });
  });

  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .singleton(HttpClient, httpClient);


  aurelia.start().then(() => aurelia.setRoot());
}

Затем, в app.js или независимо от того, что вы используете для корневой страницы вашего приложения. Есть что-то вроде этого:

 import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class App {
  displayLoader = false;
  constructor(ea) {
    this.ea = ea;

    ea.subscribe('http-request', () => this.displayLoader = true);
    ea.subscribe('http-response', () => this.displayLoader = false );
  }
...

Затем просто используйте привязку данных w / if.bind="displayLoader" или show.bind="displayLoader" in app.html .