Question

在我的Angular应用程序中，我有一个函数，它接受一系列用户选择的过滤器选择，然后向API发送POST请求，以返回根据这些过滤器选择过滤的数据。这些事件通过Event Emitters从一个组件冒泡到另一个组件：

<div class="page-content">
    <grid-view [records]="records"
        (sendLocation)="onReceivingSelections($event, type = 'location')"
        (sendZipcode)="onReceivingSelections($event, type = 'zipcode')"
        (sendFirstName)="onReceivingSelections($event, type = 'firstName')"
        (sendLastName)="onReceivingSelections($event, type = 'lastName')"
        (sendLanguage)="onReceivingSelections($event, type = 'language')"
        (sendBranch)="onReceivingSelections($event, type = 'branch')">
    </grid-view>
</div>

这很有效。但是，现在它效率不高，因为每次这些过滤器事件都会起泡，它会触发对API的POST请求。所以，如果我有五个过滤器，那么该函数会被触发五次。理想情况下，一旦收集了这些过滤器选择，我只想发出一个POST请求。

这是从这些事件发射器获取值的函数如下所示：

public async onReceivingSelections(value, type) {
    let selections = await this.filtersService.processByTypes(value, type);

    let fn = resRecordsData => {
        this.records = resRecordsData;
        let data = resRecordsData.data;
    };

    if (selections) {
      this.filtersService.processByFilters(
        this.page, this.pagesize, this.language = selections.language, this.location = selections.location,
        this.zipcode = selections.zipcode, this.firstName = selections.firstName, this.lastName = selections.lastName,
        this.branch = selections.branch, fn);
    }
}

即使我使用async / await进行设置，目前它对我没有帮助，因为processByFilters()函数将在不等待“选择”来解析async / await时触发。

我的问题是，如何以不同的方式处理这个问题，以便processByFilters()函数只触发一次“选择”，这是一个保存processByTypes()函数结果的变量，已经解决了？< / p>

顺便说一下，上面调用的两个服务方法如下所示：

public processByTypes(value, type) {
  if (value && type) { this.filters[type] = value; }
  return this.filters;
}

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

现在，即使这些过滤器值是空字符串，每次事件冒泡时，这些值的冒泡仍然会导致函数触发POST请求。所以我需要以某种方式将其拆分，以便我首先得到值，并且只有当我总共得到它们时才会通过线路发送POST请求。

我想知道是否有一种方法可以将Promise链接在一起，这样只有在我选择解决后才能调用API方法？

如果我可以将所有事件发出的过滤器值作为数组传递，那会更好。这会将API POST请求的触发限制为一次。但我不确定这是可能的。当我尝试使用数组时，我遇到了语法错误。我认为Angular 2不允许这样做。

但也许我可以将它们收集到一个数组中作为接收组件中的一个POST请求传递？

在Angular App组件中防止多个POST请求

0 个答案: