Chaining AJAX requests - Angular 2 and ES2015 Promises - ajax

Question

In Angular 1 I could do something like:
(pseudo code)
/* part 1 */
function myFn1(){
var x = $http.get('myurl');
x.then(
() => {}, // do something here
() => {} // show error here
);
return x;
}
/* part 2 */
myFn1().then(()=>{
$q.all($http.get('url'), $http.get('url2'), $http.get('url3'))
.then(()=>{ /* do something */ });
});
I know how to replicate part 1 in Angular 2
let myFn = () => {
return new Promise((res, rej) => {
this.http.get('myurl')
.subscribe((success) => {
// do something here
res(success);
}, (error) => {
// show error here
rej(error);
});
});
}
However the code in 2nd example looks much uglier and much less readable for me.
Question 1: Can I do it better/nicer way?
Following that logic I can wrap all GET requests (part 2) in promises and than chain it but again this doesn't seem to be nice and clean way of doing that.
Question 2: how I can nicely chain requests in angular 2 without wrapping every single request in promise.

Answer 1

You can leverage observables for this. It's not necessary to use promises...
In series (equivalent to promise chaining):
this.http.get('http://...').map(res => res.json())
.flatMap(data => {
// data is the result of the first request
return this.http.get('http://...').map(res => res.json());
})
.subscribe(data => {
// data is the result of the second request
});
In parallel (equivalent to Promise.all):
Observable.forkJoin([
this.http.get('http://...').map(res => res.json()),
this.http.get('http://...').map(res => res.json())
])
.subscribe(results => {
// results of both requests
var result1 = results[0];
var result2 = results[1];
});
Regarding error handling and part1, you can migrate things like this:
/* part 1 */
function myFn1(){
return this.http.get('myurl').map(res => res.json())
.map(data => {
// do something
return data;
})
.do(data => {
// do something outside the data flow
})
.catch(err => {
// to throw above the error
return Observable.throw(err);
});
}

Answer 2

As for part2, you can still use Promises:
myFn1().then(() => {
return Promise.all(
$http.get('url').toPromise().then(res => res.json()),
$http.get('url2').toPromise().then(res => res.json()),
$http.get('url3').toPromise().then(res => res.json())
).then(() => {
/* do something */
});
});