web-dev-qa-db-ja.com

Angular2でHttp呼び出しをチェーンする方法は？

私はAngular2とHttp Observableが初めてです。 Httpサービスを呼び出してObservableを返すコンポーネントがあります。そのObservableをサブスクライブするよりもうまく機能します。

今、私はそのコンポーネントで、最初のHttpサービスを呼び出した後、呼び出しが成功した場合、他のHttpサービスを呼び出し、そのObservableを返します。したがって、最初の呼び出しが成功しなかった場合、コンポーネントはそのObservableを返し、反対に2番目の呼び出しのObservableを返します。

だから、質問は、Http呼び出しを連鎖させる最良の方法は何ですか？モナドのようなエレガントな方法はありますか？

httpangular
54
zlaja

これを行うには、mergeMap演算子を使用します。

Angular 4.3+（HttpClientModuleを使用）およびRxJS 6 +

import { mergeMap } from 'rxjs/operators';

this.http.get('./customer.json').pipe(
  mergeMap(customer => this.http.get(customer.contractUrl))
).subscribe(res => this.contract = res);

Angular <4.3（HttpModuleを使用）およびRxJS <5.5

演算子mapおよびmergeMapをインポートすると、次のように2つの呼び出しをチェーンできます。

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap';

this.http.get('./customer.json')
  .map((res: Response) => res.json())
  .mergeMap(customer => this.http.get(customer.contractUrl))
  .map((res: Response) => res.json())
  .subscribe(res => this.contract = res);

詳細はこちら： http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

MergeMap演算子の詳細については、 こちら をご覧ください。

86
TGH

Rxjsを使用してジョブを実行することは、非常に優れたソリューションです。読みやすいですか？知りません。

これを行うための別の方法は、（私の意見では）より読みやすいawait/asyncを使用することです。

例：

async getContrat(){
    //get the customer
    const customer = await this.http.get('./customer.json').toPromise();

    //get the contract from url
    const contract = await this.http.get(customer.contractUrl).toPromise();

    return contract; // you can return what you want here
}

それからそれを呼び出します:)

this.myService.getContrat().then( (contract) => {
  // do what you want
});

または非同期関数で

const contract = await this.myService.getContrat();

try/catchを使用してエラーを管理することもできます。

let customer;
try {
  customer = await this.http.get('./customer.json').toPromise();
}catch(err){
   console.log('Something went wrong will trying to get customer');
   throw err; // propagate the error
   //customer = {};  //it's a possible case
}
5
xrobert35

Promiseをチェーンすることもできます。この例ごとに

<html>
<head>
  <meta charset="UTF-8">
  <title>Chaining Promises</title>
</head>
<body>
<script>
  const posts = [
    { title: 'I love JavaScript', author: 'Wes Bos', id: 1 },
    { title: 'CSS!', author: 'Chris Coyier', id: 2 },
    { title: 'Dev tools tricks', author: 'Addy Osmani', id: 3 },
  ];

  const authors = [
    { name: 'Wes Bos', Twitter: '@wesbos', bio: 'Canadian Developer' },
    { name: 'Chris Coyier', Twitter: '@chriscoyier', bio: 'CSS Tricks and Codepen' },
    { name: 'Addy Osmani', Twitter: '@addyosmani', bio: 'Googler'},
  ];

  function getPostById(id) {
    // create a new promise
    return new Promise((resolve, reject) => {
       // using a settimeout to mimic a database/HTTP request
       setTimeout(() => {
         // find the post we want
         const post = posts.find(post => post.id == id);
         if (post) {
            resolve(post) // send the post back
         } else {
            reject(Error('No Post Was Found!'));
         }
       },200);
    });
  }

  function hydrateAuthor(post) {
     // create a new promise
     return new Promise((resolve, reject) => {
       // using a settimeout to mimic a database/http request
       setTimeout(() => {
         // find the author
         const authorDetails = authors.find(person => person.name === post.author);
         if (authorDetails) {
           // "hydrate" the post object with the author object
           post.author = authorDetails;
           resolve(post); 
         } else {
       reject(Error('Can not find the author'));
         }
       },200);
     });
  }

  getPostById(4)
    .then(post => {
       return hydrateAuthor(post);
    })
    .then(post => {
       console.log(post);
    })
    .catch(err => {
       console.error(err);
    });
</script>
</body>
</html>
0
JGFMK