Question

我扩展了Http服务并覆盖了

等方法

request(url: string|Request, options?: RequestOptionsArgs): Observable<Response>

在这个请求方法中，我有一个我显示的加载器，当请求开始并且请求结束时隐藏。

request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    this.loadingService.start();

    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return super.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {
            this.loadingService.done();
        });
}

loadingService启动和停止加载指示器。但是我不希望这个加载指示符显示在所有请求上。我想要一些不显示装载机的请求。我怎样才能做到这一点？

RequestOptionArgs是一个接口

export interface RequestOptionsArgs {
    url?: string;
    method?: string | RequestMethod;
    search?: string | URLSearchParams;
    headers?: Headers;
    body?: any;
    withCredentials?: boolean;
    responseType?: ResponseContentType;
}

但我可能不应该使用这些变量作为判断是否显示加载指标的方法。

我该怎么办？

Answer 1

在服务中编写使用http服务的http请求，您不需要覆盖原始服务。

然后创建两个方法，一个用于loadingService，另一个用于非loadingService。

requestWithLoading(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    this.loadingService.start();

    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return http.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {
            this.loadingService.done();
        });
}

requestNonLoading(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {

    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return http.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {});
}

Answer 2

1.解决方案： this.loadingService.start();进入您的组件。

2.解决方案：否则将一个参数isLoading :boolean = true设置为服务。

request(url: string|Request, options?: RequestOptionsArgs, isLoading:boolean = true): Observable<Response> {
  if(isLoading){
     this.loadingService.start();
   }


    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return super.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {
            this.loadingService.done();
        });
}

根据更多内容设置默认值 true 和 false 。

如何在请求中的Angular 2中提供自定义RequestOptionsArgs？

2 个答案: