如何在Typescript中创建一个带有for循环和API的异步/promise函数？

7fyelxc5 于 2022-11-30 发布在 TypeScript

关注(0)|答案(1)|浏览(152)

我正在努力使一个函数在完成所有API调用和for循环之后才返回数据。

getListingsImages(sessionID, mlsSearchCriteria){

      this.http.get(this.laconiaBaseURL + "mls/search/" + sessionID + "?" +queryString).subscribe((data)=>{

        listings = data['data'];

         for (let listing of listings) {

          postData.listingImageURL = imageBaseURL + listing.firstImage;
          postData.listingPrice = this.formatter.format(listing.ListPrice).toString();
          postData.listingMLSID = listing.listingKey;
          postData.listingAddress = listing.FullAddress;

          this.http.post(this.imageParserBaseURL, postData, {responseType: 'text'}).subscribe((data)=>{

            this.slides.push({
              data: data,
              type: "image",
              slideHeader: null,
              duration: 10
            });

          });
        }
      });
  }

注意我有两个http调用，我想等到两个清单都得到了，for循环迭代并发布数据。this. slides目前只是一个全局变量。
我试过使用回调，但我只是不太明白，所有的例子都不太适合我的情况。
如何使代码等待API调用和For循环的完成？

typescript

来源：https://stackoverflow.com/questions/74620215/how-can-i-create-an-async-promise-function-with-for-loop-apis-in-typescript

1条答案

按热度按时间

oug3syen1#

您应该能够将可观察性转换为承诺，然后使用典型的async/await模式，如下所示：

async getListingsImages(sessionID, mlsSearchCriteria) {
  const data = await lastValueFrom(this.http.get(this.laconiaBaseURL + "mls/search/" + sessionID + "?" +queryString));
  listings = data['data'];
  let postDatas = listings.map(listing => Object.assign({}, postData, {
      listingImageURL: imageBaseURL + listing.firstImage,
      listingPrice: this.formatter.format(listing.ListPrice).toString(),
      listingMLSID: listing.listingKey,
      listingAddress: listing.FullAddress
    });
  let posts = postDatas
    .map(postData => this.http.post(this.imageParserBaseURL, postData, {responseType: 'text'}))
    .map(obs => lastValueFrom(obs));
  const results = await Promise.all(posts);
  const newSlides = results.map(data =>{
          data: data,
          type: "image",
          slideHeader: null,
          duration: 10
        });
  this.slides.push(... newSlides);
}

这对可接受的行为做了一些假设。例如：

您希望添加到this.slides的值的顺序与它们在第一个请求的数据中返回的顺序相同
在更新this.slides之前，您可以等待所有结果返回
您不需要取消请求
您不需要限制对imageParserBaseURL的并发请求

如果你需要更高级的行为，这将需要调整。你甚至可能需要返回一个可观察的而不是一个承诺。

赞(0）回复(0）举报 2022-11-30

我来回答

如何在Typescript中创建一个带有for循环和API的异步/promise函数？

1条答案

相关问题

热门标签

最新问答