Angular4 中的异步调用答案

【问题标题】：Asynchronous Calls in Angular4Angular4 中的异步调用
【发布时间】：2019-02-24 05:54:20
【问题描述】：

我确信这个问题之前已经被问过，但我也相信我的用例完全不同。

我正在使用 Angular 4。我有一个服务，它调用一个获取项目列表的 http get 请求。提取的每个项目都包含一个人的名字、姓氏、出生日期集合中的数据。

因此，当我提出这个请求时，我还需要发出另一系列 http get 请求，为列表中的每个项目发送 firstname、lastname、dob 并获取地址并为列表中的每个项目设置它在我的用户界面中。

我需要一种非阻塞的异步方式来处理它。

现在这是我处理它的方式，我的 UI 会立即加载整个模板和第一个项目。然后它会在从第一个 api 填充其余项目之前获取第二个 api 并更新该数据。

因此，页面的加载看起来确实不一致且缓慢。

请查看下面的代码并提出建议。

// the below service is the http request to get the list of items.

this._searchService.search(data).subscribe(
    resp => {
        this.loadaddressforeachitemindata(resp);
        this.onSuccess(resp);
    }, (error) => {
        this.loaderService.display(false);
        console.log("Error in search---"+error);
        this.errorMessage = "Internal Server Error, please try after some time ";
});

onSuccess() 方法获取响应并将数据设置为模型

onSuccess(data: Response) {
    this.results = this.service.buildResult( data.json().response);
    this._router.navigateByUrl('/dashboard/landing/(view:people/person/results)');
}

buildresult 将数据设置到我的模型类结果中，如下所示：

export class PersonResults {
    firstname?: any;
    lastname?: any[];
    dob?: any[];
    address: any[];
}

loadaddressforeachitem() 方法包含一个 for 循环，用于遍历整个列表，调用 http get 请求以获取在第一个 http 请求中获取的每个项目的数据集

loadaddressforeachitem(data:Response){
    for(let i = 0; i<numberofiteminlist ; i++){
        let rowdata = data.json().response.person[i]
        let firstname = rowdata.names.name.firstName;
        let lastname = rowdata.names.name.lastName;
        let dob = rowdata.DOBs.DOB;
        let addresssearchparams = ({ firstName : firstname, lastName : lastname, dob: appdob });
        this.service.getAddressData(addresssearchparams).subscribe(
            res => {
                this.service.storeaddressdata(res)
        })
    } // end of for loop
} // end of loadaddressforeachitem method

storeaddressdata() 是服务中的一种方法，用于将每个项目返回的地址推送到上述我的数据模型中的数组“地址”字段中。

【问题讨论】：

标签： angular asynchronous

【解决方案1】：

与其等待获取每个项目的所有 addressInformation ，我建议一旦您获得一个人的 addressInformation ，同时更新 UI。这样用户将获得一个一个加载数据的良好体验，并且浏览器不会等待所有异步调用完成。

为此，您不需要大的更改，简单的更改是将 loadaddressforeachitem 移动到您的组件中，并在 getAddressData 订阅回调上更新 UI 的范围

loadaddressforeachitem(data:Response){
        for(let i = 0; i<numberofiteminlist ; i++){
             let rowdata = data.json().response.person[i]
                  let firstname = rowdata.names.name.firstName;
                  let lastname = rowdata.names.name.lastName;
                  let dob = rowdata.DOBs.DOB;
                  let addresssearchparams = ({ firstName : firstname, lastName : lastname, dob: appdob });
          this.service.getAddressData(addresssearchparams).subscribe(
            res => {
                 //here you can update the UI scope or append new address data in the scope 
          })
  } // end of for loop
}

或者，如果您不想将逻辑从服务中移出，您可以使用 RxJS 主题 将数据发送到组件中。您可以从组件接收通知并使用作为参数传递的数据更新 UI。

https://ncjamieson.com/understanding-subjects/

你也可以使用类似于 RxJS Subject 的 Angular EventEmitter

https://angular.io/api/core/EventEmitter

【讨论】：