角度6可观测的链接和错误处理

Question

我是通过可观察得到的参数，如果它是正确的枚举类型，然后我获取数据。我不使用快照来获取param。这需要使用可观察的。

此外，页面上还有一个刷新按钮，它只是直接调用第二个数据方法，因为我们将获得可用于获取数据的正确枚举。

目前，以下工作为我。

export class MaintainComponent implements OnInit, OnDestroy {
  grouptType: zGroupTypes;
  title: string = "";
  isError: boolean = false;
  errorMessage: string = "";
  groupList: Group[];

  //handles to destroy the observables manually 
  activatedRouteSubscription: Subscription; 
  groupSubscription: Subscription;

  constructor(private activatedRoute: ActivatedRoute, private router: Router, private dataService: DataService) { }

  ngOnInit() {
    this.title = "";
    this.isError = false;
    this.errorMessage = "";
    this.groupList = [];

    this.checkAndGetData();
  }

  ngOnDestroy() {
    this.activatedRouteSubscription.unsubscribe();
    this.groupSubscription.unsubscribe();
  }

  onRefresh() {
    this.getGroupInfo();
  }

  checkAndGetData() {

    this.activatedRouteSubscription = this.activatedRoute.params.subscribe(
      (params: Params) => {
        this.grouptType = <zGroupTypes>params['type'];
        if (this.grouptType && this.grouptType in zGroupTypes) {
          //good
          this.title = zGroupTypes[this.grouptType];
          //get the group info
          this.getGroupInfo();
        }
        else {
          //error - redirect to resource missing
          this.router.navigate(['resource-missing']);
        }
      }
    );
  }

  getGroupInfo() {
    this.groupList = [];
    this.isError = false;
    this.errorMessage = "";

    const params = new HttpParams().set('groupType', this.grouptType.toString());
    this.groupSubscription = this.dataService.pull<Group[]>(`${this.dataService.endPointGroup}/GetGroupByAttributeId`, params).subscribe(
      res => {
        //res is of type Group[]
        if (!res || res.length <= 0) {
          this.isError = true;
          this.errorMessage = "No Data Found";
        }
        else {
          this.groupList = res;
        }
      },
      error => {
        this.isError = true;
        this.errorMessage = "Error happened"; //console.log(error);
      }
    );
  }

}

我想重写这个，这样我就不会使用一个可观察到的内部。在读了一些书之后，我不得不使用mergeMap，然后如何使用

1. 将错误处理为由我的两个函数处理。
2. 在刷新时，只提取groupInfo，因为我不需要再次获得groupId。它将填充页面上的负载。

我在网上找到了一个链接的例子，看起来就像

export class AppComponent {
  homeworld: Observable<{}>;
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.homeworld = this.http.get('/api/people/1').pipe(
      mergeMap(character => this.http.get(character.homeworld))
    );
  }
}

但这并没有说明如何处理错误。

我开始了一些事情，如跟随，但我是有点迷失，因为我仍然是相对较新的角度和运算符仍然不是我的优点。

  getData() {
    let singleCall = this.activatedRoute.params.pipe(
      map(params => {
        this.grouptType = <zGroupTypes>params['type'];
      }),
      filter(() => this.grouptType && this.grouptType in zGroupTypes),
      mergeMap(() => {
        const paramToPass = new HttpParams().set('groupType', this.grouptType.toString());
        this.dataService.pull<Group[]>(`${this.dataService.endPointGroup}/GetGroupByAttributeId`, paramToPass)
        .... how to proceed here
      })
    );
  }

或者可以肯定地说，我最初的做法仍然是处理这种情况的适当方法。

Answer 1

在map函数中，必须返回新值。不要在里面分配副作用。此外，在这种情况下，您应该使用switchMap而不是mergeMap。

getData() {
  let singleCall = this.activatedRoute.params.pipe(
    map(params => params.type),
    tap((groupType) => this.groupType = groupType),
    filter((groupType) => groupType && groupType in zGroupTypes),
    switchMap(() => {
      const paramToPass = new HttpParams().set('groupType', this.grouptType.toString());
      return this.dataService.pull<Group[]>(`${this.dataService.endPointGroup}/GetGroupByAttributeId`, paramToPass)
    })
  );
}

编辑:如果您想切换groupType的大小写，可以扩展到2 Observable

const param$ = this.activatedRoute.params.pipe(
  map(params => params.type),
  tap((groupType) => this.groupType = groupType),
);

param$.pipe(
  filter((groupType) => !(groupType && groupType in zGroupTypes)),
).subscribe(() => {
  console.error("Failed")
});

param$.pipe(
  filter((groupType) => groupType && groupType in zGroupTypes),
  switchMap(() => {
    const paramToPass = new HttpParams().set('groupType', this.grouptType.toString());
    return this.dataService.pull<Group[]>(`${this.dataService.endPointGroup}/GetGroupByAttributeId`, paramToPass)
  })
).subscribe((results) => {
 // to do
});