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

Question

我有一个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，我认为这就是解决方案可能存在的地方，但我尝试的任何代码排列都会导致编译错误，所以我显然遗漏了一些东西。

Answer 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"
}

Answer 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