Асинхронные вызовы в Angular4

Question

Я уверен, что этот вопрос задавался ранее, но я также считаю, что мой сценарий использования совершенно другой.

Я использую Angular 4. У меня есть служба, которая вызывает запрос http get, извлекающий список элементов.,Каждый извлеченный элемент содержит данные в наборе имени, фамилии, имени человека.

Так что, пока я делаю этот запрос, мне также нужно сделать еще одну серию запросов http get для каждого элемента в списке, отправляющего имя, фамилия, доб для каждого элемента и получить адрес и установить его для каждого элемента списка в моем пользовательском интерфейсе.

Мне нужен неблокирующий асинхронный способ обработки.

Сейчас этоэто способ, которым я обращаюсь, и мой пользовательский интерфейс загружает весь шаблон и первый элемент немедленно.А затем он извлекает второй 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 () - это метод в службе, который помещает адрес, возвращаемый для каждого элемента, в поле «адрес» массива в модели моих данных, упомянутых выше.

Answer 1

Вместо того чтобы ждать получения всей адресной информации по каждому элементу, я бы посоветовал, как только вы получите адресную информацию одного человека, обновите пользовательский интерфейс одновременно.Таким образом, пользователь получит хороший опыт загрузки данных один за другим, и браузер не будет ждать завершения всех асинхронных вызовов.

Для этого вам не нужно больших изменений, простым изменением будет перемещение loadaddressforeachitem в ваш компонент и обновите область действия пользовательского интерфейса на getAddressData обратный вызов подписки

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 Subject с данными в компоненте.Из компонента вы можете получить уведомление и обновить пользовательский интерфейс с данными, которые вы передаете в качестве параметра.

https://blog.angularindepth.com/rxjs-understanding-subjects-5c585188c3e1

Вы также можете использовать Angular EventEmitter, который похож на RxJS Subject

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