Angular — The power of “forkJoin” (RxJS)

Όλοι είχαμε το ίδιο πρόβλημα με την javascript και όλοι ψάχναμε να βρούμε λύσεις που στην τελική ήταν “άσχημες”.

Αναφέρομαι στα παράλληλα ασύγχρονα ερωτήματα. Εκτελείς 3 διαφορετικά ajax requests αλλά το τρίτο από αυτά χρειάζεται τα αποτελέσματα από το πρώτο και το δεύτερο… Τι κάνουμε? Κάποιοι απλά έβαζαν μια χρονοκαθυστέρηση “setTimeout” έτσι ώστε να προλάβουν τα δυο πρώτα να αποκτήσουν τιμές.

Έρχεται όμως τώρα η RxJS και με την χρήση του forkJoin σου δίνει την δυνατότητα να ομαδοποιήσεις τις κλήσεις σου.

let areas$ = this.getAreas().map(res => res.json().data.areas).do(val => this.areas = val);
let stations$ = this.getStations().map(res => res.json().data.stations).do(val => this.stations = val);

Τι κάνουν αυτές οι 2 σειρές? Απλά δίνουν οδηγίες όταν εκτελεστούν τα observables, που να βάλουν το αποτέλεσμα του request (το getAreas() και το getStations() είναι στην ουσία observables που εκτελούν κάποιο ajax request)

forkJoin(areas$, stations$).mergeMap(data => {
return this.getTransport(this.id);
}).subscribe(res => {
console.log(this.areas);
console.log(this
.stations);
})

Και τώρα όλη η μαγεία… Η getTransport() θα εκτελεστεί μόνο όταν τελειώσουν τα “areas$” και “stations$”. Άρα τα console.log θα έχουν τις τιμές που θέλουμε όταν τις θέλουμε.