无法将多个 api 响应从解析器传递到组件

Question

我正在尝试从两个不同的 api 获取响应并将其合并响应以作为单个对象发送到解析器。

我使用解析器将数据传递到文档组件进行加载。 但是，我无法相应地获取响应。

有谁知道可以帮我解决这个问题吗？

我需要传递单个对象作为多个 api 调用的响应。

  resolve():Observable<any> {
    return new Observable(observer => {
      let filterValue = JSON.parse(sessionStorage.getItem('stateFilter-local'));
      if (filterValue?.selection?.length > 0) {
        delete filterValue['selection'];
        sessionStorage.removeItem('stateFilter-local');
        sessionStorage.setItem('stateFilter-local', JSON.stringify(filterValue));
      }
     this.service.getCOALatestLogBookID(false).subscribe({
        next: (response) => {
          if (response['value'][0] != undefined) {
            let maxVaule = response['value'][0].id;
            this.service.getCOALatestLogBookID(true).subscribe({
              next: (result) => {
                const spConfigValue: number = 4999; //+environment.documentsGridLimit;                
                let lobvalue = (+maxVaule / spConfigValue);
                if (!Number.isInteger(lobvalue)) {
                  lobvalue = Math.floor(lobvalue) + 1;
                }
                let array = [];
                let initailValue = +result['value'][0].id;
                let endValue = initailValue + spConfigValue;
                for (let f = 0; f < lobvalue; f++) {
                  let filter = initailValue + ',' + endValue;
                  array.push(filter);
                  initailValue = endValue + 1;
                  endValue = endValue + spConfigValue;
                }
                this.modelList1=[];
                combineLatest(array.map(number => this.service.getCOALogBookGrid(number, spConfigValue.toString()))).subscribe((res: any) => {
                  res.map(item => {
                    console.log('forkJoin - ' + this.modelList.length + ' - ' + item?.['value'].length);
                    this.modelList.push(item);
                    let dd = --array.length;
                    if (dd == 0) {
                      const response = {
                        spListMaxId: maxVaule,
                        spListMinId: result['value'][0].id,
                        model: this.modelList1
                      }
                      this.modelList1=[...this.modelList];
                      observer.next(response);
                      observer.complete();
                    }
                  });
                });                
              }
            });
          } 
        } 
        });
        
        this.service.getLatestLogBookID(false).subscribe({
          next: (response) => {
            if (response['value'][0] != undefined) {
              let maxVaule = response['value'][0].id;
              this.service.getLatestLogBookID(true).subscribe({
                next: (result) => {
                  const spConfigValue: number = 4999; //+environment.documentsGridLimit;                
                  let lobvalue = (+maxVaule / spConfigValue);
                  if (!Number.isInteger(lobvalue)) {
                    lobvalue = Math.floor(lobvalue) + 1;
                  }
                  let array = [];
                  let initailValue = +result['value'][0].id;
                  let endValue = initailValue + spConfigValue;
                  for (let f = 0; f < lobvalue; f++) {
                    let filter = initailValue + ',' + endValue;
                    array.push(filter);
                    initailValue = endValue + 1;
                    endValue = endValue + spConfigValue;
                  }
                  combineLatest(array.map(number => this.service.getLogBookGrid(number, spConfigValue.toString()))).subscribe((res: any) => {
                    res.map(item => {
                      console.log('forkJoin - ' + this.modelList.length + ' - ' + item?.['value'].length);
                      this.modelList1.push(item);
                      let dd = --array.length;
                      if (dd == 0) {
                      const response = {
                        spListMaxId: maxVaule,
                        spListMinId: result['value'][0].id,
                        model: this.modelList1
                      }
                      observer.next(response);
                      observer.complete();
                      console.log(this.modelList1,"array")
                    }
                    });
                  });
                }
              });
            }          } 
          });
   });
  } 
}

Answer 1

主要问题是你永远不应该在可观察的内部订阅。 如果您遵循此规则，则不再需要创建像这样的新可观察值。

您应该使用 concatMap 或 switchMap 连接您的可观察值。

一个简短的例子是：

return new Observable(observer => {

当然，上面的代码不起作用，但它是为了用一个示例向您说明如何连接您的请求。

关键是永远不要订阅，但总是返回一个可观察的。

您还可以做的是为每个可观察量声明一个变量并返回该变量，即

doYourStuff$(): Observable<any> {

  return this.service.getCOALatestLogBookID(false).pipe(
    concatMap(latestLogBookID -> {
      console.log("latestLogBookID false", latestLogBookID);
      // some code
      return this.service.getCOALatestLogBookID(true);
    }),
    concatMap(latestLogBookID -> {
      console.log("latestLogBookID true", latestLogBookID);
      // some code
      return this.service.getCOALogBookGrid(yourVariables).pipe(
         map(bookGrid -> {
           console.log("bookGrig", bookGrid);
           // do some stuff
           return "whatever you want to return";
         })
      );
    }),
  );

}

结果将完全相同，但调试起来有点简单，因为您可以将鼠标悬停在 

// some code
concatMap(latestLogBookID -> {
    // some code
    const myObservable1$ = this.service.getCOALogBookGrid(yourVariables).pipe(
     map(bookGrid -> {
       console.log("bookGrig", bookGrid);
       // do some stuff
       return "whatever you want to return";
     })
    );
    return myObservable1$;
}
// some code

上并查看它实际返回的内容。