Angular 2: Обработка двух параллельных вызовов веб-сервисов - PullRequest
Новая
       11

Angular 2: Обработка двух параллельных вызовов веб-сервисов

0 голосов
/ 30 января 2019

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

Я попытался сделать оператор if, например, если firstData существует, затем вызвать другую службу.Но не работает 

this.service.getFirstData(reqParams).then((data: any) => {
                        if (data.response) {
                            this.firstData = data.response;
                        }
                    }).catch(err => {
                            console.log(err);
                    });
this.service.getSecondData(data.user, this.itemselected).then((data: any) => {
                            if (data) {
                                this.listData = data.response.list;
                                this.calculateData();
                            }
                        }).catch((err: any) => {
                                console.log(err)
                        });

Служба асинхронная.Как я могу справиться с этим странным поведением?Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 30 января 2019

К счастью для нас, в Angular 2/4 есть элегантный способ выполнить несколько HTTP-запросов и дождаться их завершения.Давайте напишем пример кода для этого сценария.Все, что нам нужно, это два класса.Служба REST, в которой мы инкапсулируем методы HTTP-запросов и компонент, который должен использовать данные бэкэнда. 

import {Component, OnInit} from '@angular/core';
import {RestService} from "../rest.service";
@Component({
    selector: 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
    dataFromRequest1: any;  // data from url 1
    dataFromRequest2: any;  // data from url 2
    constructor(private restService: RestService) {
    }
    ngOnInit() {
        this.restService.getDataFromTwoResources().subscribe(responseList => {
            /*
            The response list is an array. In order to access data from each individual
            request, you need to use an index.
             */
            this.dataFromRequest1 = responseList[0];
            this.dataFromRequest2 = responseList[1];
        });
    }
}

Примечание. Этот метод можно использовать для сбора запросов с нескольких серверов или с одного и того же сервера.Все, что вам нужно знать, это URL-адреса ресурсов.

0 голосов
/ 30 января 2019

Вы должны вызывать вторую службу при первом обратном вызове службы, поскольку первая служба является асинхронной 

   this.service.getFirstData(reqParams).then((data: any) => {
                            if (data.response) {
                                this.firstData = data.response;
//call your second service after the successful first service and then pass the data to the second service
                         this.service.getSecondData(data.user, 
                                     this.itemselected).then((data: any) => {
                                if (data) {
                                    this.listData = data.response.list;
                                    this.calculateData();
                                }
                            }).catch((err: any) => {
                                    console.log(err)
                            });
                          }
                        }).catch(err => {
                                console.log(err);
                        });

Если вы хотите запустить любой асинхронный параллельный вызов с использованием обещания, если оно не зависит друг от друга, вы можетепопробуйте как ниже 

Promise.all([promise1, promise2, promise3]).then(function(values) {
       console.log(values);
      //call if any other service after succesful execution of promise
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

...