遍历顺序 API 调用 Rxjs（链表）答案

【问题标题】：Traversing sequential API calls Rxjs (Linked List)遍历顺序 API 调用 Rxjs（链表）
【发布时间】：2021-08-01 21:13:53
【问题描述】：

如何遍历链表结构中的顺序 API 调用？现在我每 5 秒发出一个请求，我得到 OrdersList 数据。此对象包含一个字段 results 和一个 Order 对象数组，它还包含一个带有请求 URL 的 next 字段，以访问下一个订单数组，因为它们不是一次全部发送的。

我的orders.component.ts：

ngOnInit(): void {
    this.subscription = timer(0, 5000).pipe(
        switchMap(() => this.apiManager.fetchShopOrders())
      ).subscribe(orders => {
      
            const loadedOrders: OrdersList = orders;

            /* not working - try to get next set(s) of orders */
            if(loadedOrders.next != null){
                while(loadedOrders.next != null){
                    let response = this.apiManager.fetchNextSetOfOrders(loadedOrders.next).toPromise();
                    response.then((nextSetOrders) => {
                        const loadedNextSetOrders: OrdersList = nextSetOrders;
                        loadedOrders.next = loadedNextSetOrders.next;
                        loadedOrders.results = [...loadedOrders.results, ...loadedNextSetOrders.results];
                    })
                } 
            }
            ...
            /* do stuff with the orders */
            ...
    });
}

我的ApiManagerService：

@Injectable({ providedIn: 'root' })
export class ApiManagerService {

    private API_KEY = "...";
    private API_SECRET = "...";
    private token = "...";
    private webzine_id: string = "...";

    constructor(private http: HttpClient) {}

    fetchShopOrders() {
        const url = "https://commerce.ww-api.com/commerceapi/v1/order/" + this.webzine_id + "/order/?per_page=10";
        return this.http
            .get<OrdersList>(url, {
                headers: new HttpHeaders({
                    "API-KEY": this.API_KEY,
                    "API-SECRET": this.API_SECRET
                }),
            });
    }

    fetchNextSetOfOrders(nextSetUrl: string) {
        return this.http
            .get<OrdersList>(nextSetUrl, {
                headers: new HttpHeaders({
                    "API-KEY": this.API_KEY,
                    "API-SECRET": this.API_SECRET
                }),
            });
    }
}

如何才能将下一组订单按顺序添加到我的OrdersList 对象中？

提前致谢。

【问题讨论】：

expand 可能会有所帮助：learnrxjs.io/learn-rxjs/operators/transformation/expand
@eko 对于像我这样有棱角的菜鸟来说似乎有点中国化 ;_;
我可以稍后看看，但它只有 1 级递归吗？我的意思是，如果您从 next 字段中获取 url，它是否还包含 next 字段？
@eko 调用next 字段中的url 时，会返回另一个OrdersList 对象，该对象也可能包含next 字段。基本上，您可以将其视为返回的订单页面。如果您有 50 个订单并为每个列表设置 10 个订单，则将存在 5 个列表，每个列表都包含一个 next 字段以访问下一组订单。当然，第 5 页会将next 字段设置为null。
ok 那么orders 是您订阅的响应是一个链表，对吧？

标签： angular loops rxjs request observable

【解决方案1】：

您可以使用expand 运算符来递归链接列表并以顺序/递归的方式获取数据。

主要代码：

ngOnInit() {
  this.apiManager
    .fetchShopOrders()
    .pipe(
      expand(res => {
        if (res.results) {
          this.results.push(...res.results);
        }

        if (res.next) {
          return this.apiManager.fetchNextSetOfOrders(res.next);
        }

        return of(EMPTY);
      }),
      takeWhile(res => !!res.next) // take while res.next is defined
    )
    .subscribe(console.log);
}

Stackblitz demo

【讨论】：

还有一件事。由于我设置了计时器，我还需要重置结果数组（我会定期刷新列表）。在这种情况下，我该怎么做？请注意，res 还返回一个 previous 字段以访问上一页订单，如果此字段为空，我们将位于列表的顶部。
嘿！你可以在管道的开头添加tap(()=> this.results = []), expand(.. 或类似的东西。所以每次新定时器启动时，都会先将结果设置为一个空数组。告诉我这是否有效。