Angular-同时执行多项功能

Question

I have 3 functions that each call another function that make an API request. All this called one at a time takes time, what I would like is that these 3 functions are called at the same time to gain time. I tried to use mergeMap() but it doesn't work. Nothing happens, I tried to display things in my console but it seems that the code contained in the mergeMap() is not executed

Here is my code with mergeMap():

from(['corps', 'disciplines', 'departements']).pipe(
  mergeMap(f => {
    switch (f) {
      case 'corps':
        this.getCorps();
        break;
      case 'disciplines':
        this.getDisciplines();
        break;
      case 'departements':
        this.getDepartements();
        break;
    }
    return undefined;
  })
);

By the way if you have an idea for deleting this switch case by replacing the first array to [this.getCorps(), this.getDisciplines(), this.getDepartements()] and execute these 3 function at the same time without the switch case it would be great !

Answer 1

Awsome solution for your problem would be using effects from Reactive extension for Angular called ngrx.

Despite providing store managment it is also concentrated on triggering all state changes. Here's example from my app how could your code(considering some refactor) look like after implementing it using ngrx:

@Effect()
someObservable$: Observable<Action> = this.actions$.ofType(IDENTIFIER_FOR_CALLING_ALL_3_FUNCTIONS).pipe(
    .forkJoin(() => [service.getCorps(), service.getDisciplines(), service.getDepartements()])
        .catch(err => {
            return Observable.of(new FAILURE_ACTION_IDENTIFIER());
        })
    );

I'm not able to check if the above code is 100% accurately written but it hold the concept. What is noticable here:

• IDENTIFIER_FOR_CALLING_ALL_3_FUNCTIONS can be ANY action and there can be many of them, just place comma between them.
• any effect can trigger as much events as You want - here triggering all your methods - it's obvious they would need some refactor(for example - moving your methods to some Service )

I know that it may not be well presented so I'm putting here introduction course to ngrx/store and ngrx/effects and also link to official Github repository