当前位置:  开发笔记 > 前端 > 正文

如何在Angular2中链接Http调用?

如何解决《如何在Angular2中链接Http调用?》经验,为你挑选了2个好方法。

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

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

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



1> TGH..:

您可以使用mergeMap操作员执行此操作

首先导入运算符如下:

HttpClientModule

那么这是你如何链接两个电话:

import { mergeMap } from 'rxjs/operators';

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

这里有更多细节:http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

有关mergeMap运算符的更多信息,请参见此处


使用Angular 2.0(beta 0),需要以下内容:import'rxjs/add/operator/map'; import'rxjs/add/operator/mergeMap';
flatMap是一个别名

2> xrobert35..:

使用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
}

推荐阅读
殉情放开那只小兔子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有