猿问
下载APP

如何在Angular2中链接Http调用?

如何在Angular2中链接Http调用?

我是Angular2和Http Observable的新手。我有一个调用Http服务并返回Observable的组件。比我订阅Observable,它工作正常。

现在,我希望在该组件中,在调用第一个Http服务之后,如果调用成功,则调用其他Http服务并返回该Observable。因此,如果第一次调用不成功,则组件返回Observable,而它返回Observable的第二次调用。

所以,问题是,链接Http调用的最佳方法是什么?有没有优雅的方式,比如monads?


胡子哥哥
浏览 83回答 3
3回答

慕的地2183247

您可以使用mergeMap操作员执行此操作。Angular&nbsp;HttpClientModule4.3+&nbsp;(使用)和RxJS 6+import&nbsp;{&nbsp;mergeMap&nbsp;}&nbsp;from&nbsp;'rxjs/operators';this.http.get('./customer.json').pipe( &nbsp;&nbsp;mergeMap(customer&nbsp;=>&nbsp;this.http.get(customer.contractUrl))).subscribe(res&nbsp;=>&nbsp;this.contract&nbsp;=&nbsp;res);角度<4.3(使用HttpModule)和RxJS <5.5进口经营者map和mergeMap,那么你可以链两个电话如下:import&nbsp;'rxjs/add/operator/map';&nbsp;import&nbsp;'rxjs/add/operator/mergeMap';this.http.get('./customer.json') &nbsp;&nbsp;.map((res:&nbsp;Response)&nbsp;=>&nbsp;res.json()) &nbsp;&nbsp;.mergeMap(customer&nbsp;=>&nbsp;this.http.get(customer.contractUrl)) &nbsp;&nbsp;.map((res:&nbsp;Response)&nbsp;=>&nbsp;res.json()) &nbsp;&nbsp;.subscribe(res&nbsp;=>&nbsp;this.contract&nbsp;=&nbsp;res);这里有更多细节:http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http有关mergeMap运算符的更多信息,请参见此处

海绵宝宝撒

使用rxjs来完成这项工作是一个非常好的解决方案。它易于阅读吗?我不知道。另一种方法是执行此操作并且更具可读性(在我看来)是使用await / async。示例:async getContrat(){&nbsp; &nbsp; //get the customer&nbsp; &nbsp; const customer = await this.http.get('./customer.json').toPromise();&nbsp; &nbsp; //get the contract from url&nbsp; &nbsp; const contract = await this.http.get(customer.contractUrl).toPromise();&nbsp; &nbsp; return contract; // you can return what you want here}然后叫它:)this.myService.getContrat().then( (contract) => {&nbsp; // do what you want});或者在异步功能中const contract = await this.myService.getContrat();您还可以使用try / catch来管理错误:let customer;try {&nbsp; customer = await this.http.get('./customer.json').toPromise();}catch(err){&nbsp; &nbsp;console.log('Something went wrong will trying to get customer');&nbsp; &nbsp;throw err; // propagate the error&nbsp; &nbsp;//customer = {};&nbsp; //it's a possible case}

慕容森

你也可以链接Promises。按照这个例子<html><head> &nbsp;&nbsp;<meta&nbsp;charset="UTF-8"> &nbsp;&nbsp;<title>Chaining&nbsp;Promises</title></head><body><script> &nbsp;&nbsp;const&nbsp;posts&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;title:&nbsp;'I&nbsp;love&nbsp;JavaScript',&nbsp;author:&nbsp;'Wes&nbsp;Bos',&nbsp;id:&nbsp;1&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;title:&nbsp;'CSS!',&nbsp;author:&nbsp;'Chris&nbsp;Coyier',&nbsp;id:&nbsp;2&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;title:&nbsp;'Dev&nbsp;tools&nbsp;tricks',&nbsp;author:&nbsp;'Addy&nbsp;Osmani',&nbsp;id:&nbsp;3&nbsp;}, &nbsp;&nbsp;]; &nbsp;&nbsp;const&nbsp;authors&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;name:&nbsp;'Wes&nbsp;Bos',&nbsp;twitter:&nbsp;'@wesbos',&nbsp;bio:&nbsp;'Canadian&nbsp;Developer'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;name:&nbsp;'Chris&nbsp;Coyier',&nbsp;twitter:&nbsp;'@chriscoyier',&nbsp;bio:&nbsp;'CSS&nbsp;Tricks&nbsp;and&nbsp;Codepen'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;name:&nbsp;'Addy&nbsp;Osmani',&nbsp;twitter:&nbsp;'@addyosmani',&nbsp;bio:&nbsp;'Googler'}, &nbsp;&nbsp;]; &nbsp;&nbsp;function&nbsp;getPostById(id)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;create&nbsp;a&nbsp;new&nbsp;promise &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Promise((resolve,&nbsp;reject)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;using&nbsp;a&nbsp;settimeout&nbsp;to&nbsp;mimic&nbsp;a&nbsp;database/HTTP&nbsp;request &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;find&nbsp;the&nbsp;post&nbsp;we&nbsp;want &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;post&nbsp;=&nbsp;posts.find(post&nbsp;=>&nbsp;post.id&nbsp;==&nbsp;id); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(post)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve(post)&nbsp;//&nbsp;send&nbsp;the&nbsp;post&nbsp;back &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject(Error('No&nbsp;Post&nbsp;Was&nbsp;Found!')); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},200); &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;} &nbsp;&nbsp;function&nbsp;hydrateAuthor(post)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;create&nbsp;a&nbsp;new&nbsp;promise &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Promise((resolve,&nbsp;reject)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;using&nbsp;a&nbsp;settimeout&nbsp;to&nbsp;mimic&nbsp;a&nbsp;database/http&nbsp;request &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;find&nbsp;the&nbsp;author &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;authorDetails&nbsp;=&nbsp;authors.find(person&nbsp;=>&nbsp;person.name&nbsp;===&nbsp;post.author); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(authorDetails)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;"hydrate"&nbsp;the&nbsp;post&nbsp;object&nbsp;with&nbsp;the&nbsp;author&nbsp;object &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;post.author&nbsp;=&nbsp;authorDetails; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve(post);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject(Error('Can&nbsp;not&nbsp;find&nbsp;the&nbsp;author')); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},200); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;} &nbsp;&nbsp;getPostById(4) &nbsp;&nbsp;&nbsp;&nbsp;.then(post&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;hydrateAuthor(post); &nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;.then(post&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(post); &nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;.catch(err&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(err); &nbsp;&nbsp;&nbsp;&nbsp;});</script></body></html>
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答