如何迭代值数组并调用返回promise的服务并等待Angular 6中的每个结果

问题描述 投票:0回答:2

我有一个Angular 6项目,我得到一个字符串数组,需要调用数组中每个项目的后端服务。

组件代码(简化)如下所示:

items: any[] = ['one','two','three']

for (let item of this.items) {
    this.dataSvc.searchItems(item)
    .subscribe(
        data => {
            console.log(item, data);
        })
}

和Angular服务代码如下:

public searchItems(item: string): Observable<any> {
        let params = new HttpParams();

        params = params.append('item', item);

        return = this.httpClient.get(SERVER_API, { params: params })
}

这适用于数组中的单个项目,但是当数组扩展时,服务会开始抛出超时错误,并返回一些但不是所有结果。

我之前有过与这个后端交互的问题,在其他区域我有一个不会改变的固定项目列表,我在代码中链接了一系列静态Promise,我等到每次调用服务直到之前的结果又回来了,但是我不确定如何在循环中完成同样的事情。

这就是我使用Promise包装器在其他地方使用promise链进行管理的方法:

fetchService(item): Promise<any> {
    return this.dataSvc.searchItems(item)
        .toPromise();
}

this.fetchService('one')
    .then(data => {
        console.log("one", data);
        return this.fetchRegCodeLit('two')
    }).then(data => {
        console.log("two", data);
        return this.fetchRegCodeLit('three')
    }).then(data => {
        console.log("three", data);
    })

items数组是动态的,它可能包含10或100个项目,我需要能够将每个项目传递给同一个服务,并保证我已经收到响应并在再次调用服务之前处理它,但我可以'似乎弄清楚如何。

我一直在寻找async / await,我认为这就是解决方案可能存在的地方,但我尝试的任何代码排列都会导致编译错误,所以我显然遗漏了一些东西。

angular typescript iterator async-await observable
2个回答
1
投票

使用toPromise()可能是件好事。您可以并行运行所有内容并使用Promise.all()等待结果。

items: any[] = ['one','two','three']

//list of http promise
const itemsSearchPromise = [];

for (let item of this.items) {
   itemsSearchPromise.push(this.dataSvc.searchItems(item).toPromise());
}

Promise.all(itemsSearchPromise).then( (datas) => {
  //datas is an array of every result in the order of the "itemsSearchPromise"
}

-2
投票

我认为async / await也是答案。它应该很简单:

public async searchItems(item: string): Observable<any> {
    let params = new HttpParams();

    params = params.append('item', item);

    request = await this.httpClient.get(SERVER_API, { params: params });

    return request;
}

你的fetchService对我来说没问题。这是一个可以揭示承诺的网站。

https://medium.com/@balramchavan/using-async-await-feature-in-angular-587dd56fdc77

© www.soinside.com 2019 - 2024. All rights reserved.