将数据从一个函数分配给另一个函数

Posted 2023-03-13

【中文标题】将数据从一个函数分配给另一个函数

【英文标题】：Assign Data From One Function To Another

【发布时间】：2021-12-18 02:11:16

【问题描述】：

我正在使用TypeScript 中的服务检索数据库数据，并在全局变量中分配数据，如下所示：

parentMenu: any[] = []; //Global var

LoadParentMenu() 
   this.menuService.getParentMenu().subscribe(result => this.parentMenu = result); //Assigning value here


LoadChildMenu() 
   console.log(this.parentMenu); //Willing to use the global variable in the second function

我知道，可以按如下方式调用第一个函数中的第二个函数，该函数运行良好但不符合我的目的：

LoadParentMenu() 
   this.LoadChildMenu(result); //Passing data in the second function

但我的要求是从两个服务中获取数据，将它们绑定到一个全局数组变量，最后在另一种方法中使用它们（实际上是第三种方法）。我尝试按如下方式在控制台中返回 undefined：

parentMenu: any[] = []; //Global var 1
childMenu: any[] = []; //Global var 2

LoadParentMenu() 
   this.menuService.getParentMenu().subscribe(result => this.parentMenu = result); //Assigning value here


LoadChildMenu() 
   this.menuService.getParentMenu().subscribe(result => this.childMenu = result); //Assigning value here


LoadThirdFunc() 
   console.log(this.parentMenu);
   console.log(this.childMenu);

在第三个函数中，我需要通过以下两个全局变量进行更改：

const mergeById = (array1, array2) =>
array1.map(parent => (
  ...parent,
  childMenu: array2.filter((child) => child && (child.parentMenu === parent.menuNo))
    .map(child => child && child.menuName)
));

var result = mergeById(array1, array2)
  .filter(x => x.childMenu && x.childMenu.length > 0);

有什么合适或简单的方法可以做到以上几点吗？

【参考方案1】：

它返回 undefined 因为 typescript 逐行执行，console.log 在从服务器获取数据之前被调用。 您可以将这两个请求合二为一，然后只有当两个请求数据都可用时才会解决

const promises = [];
promises.push(this.menuService.getParentMenu());
promises.push(this.menuService.getParentMenu());
Promise.all(promises).then(responselist=>
//call any function of your choice, responselist will be an array of two results 
// of your services
)
//if you are using angular then you can do something like this
import Observable from 'rxjs/Rx';
const reqs: Observable<any>[] = [];
reqs.push(this.menuService.getParentMenu());
reqs.push(this.menuService.getParentMenu());
Observable.forkJoin(reqs).subscribe(responseList => 
this.parentMenu = responseList[0];
this.childMenu = responseList[1];
//Or you loop through responselist
responseList.map((res,index))
);

【讨论】：

Observable 成功了。非常感谢@Danish Dullu。你能再推荐一件事吗？

是的，我很乐意

【参考方案2】：

在我看来这将是 observables 的完美用途，如果这不改变数据，shareReplay 可以很好地用于不再触发 http-requests（假设它们是 http-requests...）

服务：

menus$ = forkJoin([this.LoadParentMenu(), this.LoadChildMenu()]).pipe(shareReplay(1))

forkJoin 并行运行这些请求，并返回一个包含 2 项数据的数组，就像在伪中一样：

[loadParentMenuResultHere, loadChildMenuResultHere]

现在您可以在任何需要的地方订阅 menus$，我喜欢 async 管道，因为它也会为您取消订阅，所以如果可能的话，我建议您这样做。

如果您甚至想默认执行您的第三个功能，您也可以将其链接到那里，并且您已经拥有一个符合您要求的结构化数组，因此如下所示：

menus$ = forkJoin([this.LoadParentMenu(), this.LoadChildMenu()]).pipe(
  map( /** do your magic here and return the data structure you want! **/ )
  shareReplay(1)
);