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 doens让我这样做。

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

此外，如果你有更好的方法解决这个问题，我可以接受建议。

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 );
  }
...

然后只需在if.bind="displayLoader"中使用数据绑定w / show.bind="displayLoader"或app.html。

在HttpClient请求上动态显示元素

1 个答案: