Question

在Angular 2应用程序中，我根据各种用户生成的过滤器选择发出网络请求，并将过滤后的数据返回以打印到屏幕上。这正在按预期方式工作。但是，如果在满足原始网络请求之前已进行了较新的筛选器选择，我还希望取消请求。我正在尝试找出最简单的方法。组件中的请求如下所示：

private sendRequest = _.debounce((languageFilter, locationFilter, zipFilter, firstNameFilter, lastNameFilter, branchFilter) =>
{
    this.filtersService.getByFilters(
        this.page - 1, this.pagesize, this.currentStage, this.language = languageFilter, this.location = locationFilter,
        this.zipcode = zipFilter, this.firstName = firstNameFilter, this.lastName = lastNameFilter,
        this.branch = branchFilter,
         (resRecordsData) => {
            this.records = resRecordsData;
         });
 }, 200);

此处调用的filterService的getByFilters()函数如下所示：

public getByFilters(page, pagesize, stage?, language?, location?, zipcode?, firstName?, lastName?, branch?, fn?: any)
{
    return this.apiService.get({
      req: this.strReq, reqArgs: { page, pagesize, stage, language, location, zipcode, firstName, lastName, branch }, callback: fn });
}

依次调用中央apiService上的get()函数，如下所示：

public get(args: {
    req: string,
    reqArgs?: any,
    reqBody?: any,
    callback?: IRequestCallback
}): Observable<Response>
{
    args['reqType'] = 'get';
    return this.runHttpRequest(args);
}

此处调用的runHttpRequest()如下所示：

private runHttpRequest(params: {
    req?: string,
    reqArgs?: any,
    reqBody?: any,
    callback?: IRequestCallback,
    reqType?: string
}): Observable<Response>
{
    let {req, reqArgs, callback, reqBody, reqType} = params;

    // Check request string
    if (String.isNullOrEmpty(req)) throw new Error('Undefined request');

    // Initialize options if undefined
    if (!reqArgs) reqArgs = {};

    // Build URL
    let route = this.buildRequestUrl(req, reqArgs);

    if (this.http[reqType] === undefined) throw new Error('Cannot process HTTP request, undefined request type');

    let observable: Observable<any> = this.http[reqType](route, reqBody);

    // Pre-process/map data
    observable = observable.map(function (res: Response)
    {
        let r: IResponse =
            {
                ok: res.ok,
                status: res.status,
                statusText: res.statusText
            };

        let body = null;

        try
        {
            body = res.json();
        } catch (err)
        {

        }

        r.data = body || res;

        // Content cleanup; If a data property is provided within the
        // body of the response, then we use that
        // information as the data requested.
        if ('data' in r.data)
        {
            Object.assign(r, r.data);
        }

        return r;
    });

    observable = observable.catch(function (error: any)
    {
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';

        this.processHttpError(error);

        if (callback) callback(error);

        return Promise.reject(errMsg);
    }.bind(this));

    observable.subscribe(function (args: any)
    {
        if (callback) callback(<IResponse> args);
    });

    return observable;
}

使用此实现选择了最新的过滤器后，如何取消请求？我试图把我的头放在这段代码中要处理这种操作的地方。

在Angular 2 App中更改过滤器选择时取消网络请求

0 个答案: