在 Angular 6 中的 do while 循环中延迟递归 HTTP get 请求

Question

我在等待另一个 API 调用完成时递归地使用外部 API。 http 调用是通过使用import {HttpClient} from '@angular/common/http'

我是框架的新手，也许代码中做错了什么，但工作流程如下：

第一个 API 调用由此块进行

initializeCrawling(): void {         
this.callCrawlInitializingAPI()       // this method is calling the api
.subscribe(
restItems => {
this.groupCrawlingRestResponse = restItems;
console.log(this.groupCrawlingRestResponse);
this.isCrawlActive = false;
}
)
this.fetchResults();    // while callCrawlInitializingAPi call executes, this block here must executed on paralel.
}

现在我宣布一个全球

布尔

当this.callCrawlInitializingAPI()执行完成时将变得false变量。

下面是必须递归调用的第二个 API 调用的代码。

fetchResults(): void {
this.fetchDataApiCall()
.subscribe(
restItems => {
this.groupCrawlingRestResponse = restItems;
console.log(this.groupCrawlingRestResponse);
}
)
}

fetchDataApiCall() {
do {
this.http
.get<any[]>(this.fetchResultsUrl, this.groupCrawlingResultRestResponse)
.pipe(map(data => data));
console.log("Delaying 3000");
} while (this.isCrawlActive);
}

这里的目标是延迟 do - 而循环让我们说 1 秒。

我尝试了以下方法： 1 - 从"rxjs/internal/operator"导入{delay}并如上所述使用;

do {
this.http
.get<any[]>(this.fetchResultsUrl, this.groupCrawlingResultRestResponse)
.pipe(map(data => data));
console.log("Delaying 3000");
delay(3000);
} while (this.isCrawlActive);

2-使用setTimeout((函数，如上：

do {
setTimeout(function(){
this.http
.get<any[]>(this.fetchResultsUrl, this.groupCrawlingResultRestResponse)
.pipe(map(data => data));}, 1000)
} while (this.isCrawlActive)

它们都没有工作，据我了解，do while 循环不会延迟，并且像继续一样处理很多调用。

首先，我想知道如何让它工作，其次，是否有更好的方法来使用 Angular 做到这一点，因为我是框架的新手。

谢谢

---

更新

如果将来有人会搜索这个，我的问题有一个正确的答案。

我唯一需要更改的是这一行代码clearInterval(intervalHolder.id)

Answer 1

首先，当您订阅包含 http 事件的函数时，该函数必须返回 stream/http-call

fetchDataApiCall() {
return this.http
.get<any[]>(this.fetchResultsUrl, this.groupCrawlingResultRestResponse)
.pipe(map(data => data));
}

之后，如果要延迟响应，则必须将延迟运算符放在管道中，就像那样。

fetchDataApiCall() {
return this.http
.get<any[]>(this.fetchResultsUrl, this.groupCrawlingResultRestResponse)
.pipe(map(data => data),
delay(3000));
}

更新

正如更新前的评论所说，清除间隔存在一些问题，因此这是针对该案例的 100% 测试解决方案。在第一个代码块中有轮询逻辑，只要isActive属性为真，每个 500 毫秒的新请求都会被调用。

第二个代码块是模拟请求的服务。

export class ChildOne {
longReqData;
shortReqData = [];
active = true;
constructor(private requester: RequesterService) {}
loadData() {
this.requester.startLongRequest().subscribe(res => {
this.longReqData = res;
console.log(res);
this.active = false;
});
let interval = Observable.interval(500);
let sub = interval.subscribe(() => {
this.requester.startShortRequest().subscribe(res => {
this.shortReqData.push(res);
console.log(res);
});
if (this.active === false) {
sub.unsubscribe();
}
});
}
}

@Injectable()
export class RequesterService {
private counter = 0;
stop() {
this.subject.next(false);
}
startShortRequest() {
this.counter += 1;
let data = {
delay: 0,
payload: {
json: this.counter
}
};
return this.mockRequest(data);
}
startLongRequest() {
let data = {
delay: 3000,
payload: {
json: "someJSON"
}
};
return this.mockRequest(data);
}
mockRequest(data) {
return Observable.of(data).pipe(delay(data.delay));
}
}