在Angular中使用forkJoin时可重用搜索

在发出AJAX请求的每个模块中，都会使用加载程序映像来阻止内容，直到请求完成。大多数模块执行一到三个请求，所以我们的解决方案是使用多个回调。当我遇到一个可以进行八次单独调用的组件时，我立即开始寻找更好的方法，并发现了

forkJoin

。使用

forkJoin

要求我们改变处理请求的方式。这是我们的代码将如何更改的一个很好的示例：

之前：

ngOnInit（）{
this.showLoader（）；
这个.getUsers（（）=>{
这个。onSearch（）；
});
}
getUsers（回调：函数）{
返回此.userService.getUsers（）
.订阅(
数据=>{
这个用户=数据；
回调（）；
}
error=>this.showError（'error getting Users'，error）
);
}
onSearch（视图？：字符串）{
this.showLoader（）；
//参数相关逻辑
返回此.expenseService.search（视图）
.订阅(
数据=>{
这个结果=数据；
this.hideLoader（）；
}
error=>this.bathror（'error geting Expenses'，error）
);
}

之后：

ngOnInit（）{
this.showLoader（）；
分叉连接([
这是.getUsers（），
这个.onSearch（）
]).订阅(
数据=>{
this.users=数据[0]；
该结果=数据[1]；
this.hideLoader（）；
},
error=>this.showError（'意外错误'，error）
);
}
getUsers（）{
返回此.userService.getUsers（）；
}
onSearch（视图？：字符串）{
//参数相关逻辑
返回此.expenseService.search（查看）；
}

我对这些变化大部分感到满意；通用错误处理让我很沮丧，因为我无法在TypeScript中为失败的调用自定义错误，并且将不得不调整我的API。真正的问题在于可重用方法，比如

onSearch（）

，我想在加载模块和更改搜索字段时调用它。我能想到的唯一解决方案是在

forkJoin

请求完成后调用

onSearch（）

：

ngOnInit（）{
this.showLoader（）；
分叉连接([
这个文件名为getUsers（）
]).订阅(
数据=>{
this.users=数据[0]；
这个。onSearch（）；
},
error=>this.showError（'意外错误'，error）
);
}
getUsers（）{
返回此.userService.getUsers（）；
}
onSearch（视图？：字符串）{
this.showLoader（）；
//参数相关逻辑
此.expenseService.search（视图）
.订阅(
数据=>{
这个结果=数据；
this.hideLoader（）；
}
error=>this.bathror（'error geting Expenses'，error）
);
}

一个微小的变化是在单独的方法中返回

this.expenseService.search（）

，并且

forkJoin

和

onSearch（）

都可以使用它，但感觉没有必要

ngOnInit（）{
this.showLoader（）；
分叉连接([
这是.getUsers（），
这个.getExpenses（）
]).订阅(
数据=>{
this.users=数据[0]；
该结果=数据[1]；
this.hideLoader（）；
},
error=>this.showError（'意外错误'，error）
);
}
getUsers（）{
返回此.userService.getUsers（）；
}
getExpenses（视图？：字符串）{
//参数相关逻辑
返回此.expenseService.search（查看）；
}
onSearch（视图：字符串）{
this.showLoader（）；
这个.getExpenses（视图）
.订阅(
数据=>{
这个结果=数据；
this.hideLoader（）；
}
error=>this.bathror（'error geting Expenses'，error）
);
}

---

我对Angular还比较陌生，所以可能有一些关于

forkJoin

或订阅的东西我不知道我可以利用。有比我列出的两个选项更好的方法吗？

有许多不同的方法可以做到这一点。一种方法是从

ngOnInit

中提取出

forkJoin

部分，并传入您想要使用的实际方法。例如：

getData(methods) {
  this.showLoader();
  forkJoin(methods).subscribe({
    error: error => this.showError('Unexpected Error', error),
    complete: () => this.hideLoader(),
  });
}

getUsers() {
    return this.userService.getUsers().pipe(map(data => this.users = data));
}

然后您可以在

ngOnInit

中使用它：

// arrow function used to keep lexical binding
this.getData([() => this.getUsers(), () => this.getExpenses()]);

…和

onSearch

：

this.getData([() => this.getExpenses(view)]);

为了更新结果，您可以更新检索函数的可观测值。例如：

getData(methods) {
  this.showLoader();
  forkJoin(methods).subscribe({
    error: error => this.showError('Unexpected Error', error),
    complete: () => this.hideLoader(),
  });
}

getUsers() {
    return this.userService.getUsers().pipe(map(data => this.users = data));
}

---

谢谢你的选择。我喜欢也不喜欢，但到目前为止，还没有什么能让我完全相信。老实说，在这种情况下，最好的解决方案是更改API，以便每次只需调用一次就可以获得所需的所有信息（例如，GraphQL）