Question

在Angular 1中我可以做类似的事情：

（伪代码）

我知道如何在Angular 2中复制第1部分

/* 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 */  });
});

然而，第二个例子中的代码看起来更加丑陋，对我来说可读性更低。

问题1：我可以做得更好/更好吗？

遵循这个逻辑，我可以将所有GET请求（第2部分）包装在promises中，而不是链接它，但是这似乎并不是很好而且干净的方式。

问题2：如何在角度2中很好地链接请求，而不会将每个请求包含在承诺中。

Answer 1

您可以利用observables。没有必要使用承诺......

串联（相当于承诺链）：

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
    });

并行（相当于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];
});

关于错误处理和第1部分，您可以迁移这样的内容：

/* 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

至于第2部分，你仍然可以使用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 */
  });
});

链接AJAX请求 - Angular 2和ES2015 Promises

2 个答案: