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

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.Solution : this.loadingService.start(); 移动到你的组件中。

2.Solution : 否则设置一个 peram 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？

How can I provide custom RequestOptionsArgs in Angular 2 in a request?

typescript

angular-http

angular