在HttpClient请求上动态显示元素

Question

我希望为我的应用程序完成的每次提取显示一个加载器,防止用户多次提交相同的请求.为此,我更改了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不让我这样做.

有没有办法动态显示自定义视图,而无需更改路由或必须在每个执行请求的组件上插入新的加载视图？

此外,如果你有更好的方法解决这个问题,我愿意接受建议.

Answer 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"在app.html.