如何调用多个 API 并在 Angular 6 中订阅？答案

【问题标题】：How to call multiple API and subscribe in angular 6?如何调用多个 API 并在 Angular 6 中订阅？
【发布时间】：2019-11-22 14:38:52
【问题描述】：

在我的应用程序中，要调用所有POST 请求，我使用了service。

当我从服务器获得特定代码(E.x : 401)时，我会调用 API 来获取新令牌。

在收到另一个令牌之前，如果有任何其他 API 调用来自，我会将所有这些请求存储在一个数组中。可能是 n 个请求。现在假设在调用 newToken API 时有 3 个 API 调用。

一旦我得到一个新的令牌，我必须在所有后续的 API 中传递它。现在我必须执行所有待处理的 API 请求并为它们各自的调用提供数据。

代码示例：

api.service.ts

POST(URL , param){
   return new Observable<any>(observer => {

  let headers = new HttpHeaders({
    'Content-Type': 'Content-Type': 'application/json'
  });

  let options = {
    headers: headers
  };

  this.http.post(URL, param, options)
        .subscribe(data => {
          var apiRes: any = data;                                       
          this.inValidSession();
          observer.next();
          observer.complete();              
  }
  ......

  //  For execute pending request I have set this 

  for (let i = 0; i < this.queue.length; i++) {                          
        this.REPOST(this.queue[i].param, this.queue[i].url).subscribe((queueResponse) => {             
          observer.next(queueResponse);
          observer.complete();
          this.queue.shift();                      
       });
   }
}

user.component.ts

ngOnInit(){
    this.getUserData();        
    this.getProductData();
}

getUserData(){
   this.apiService.post({},'/apiName').subscribe((response) => {
       console.log(response);
   })
}

getProductData(){
   this.apiService.post({},'/apiName2').subscribe((response) => {
       console.log(response);
   })
}

问题是，当我执行所有待处理的 API 时，我会在控制台中获取数据。但不是subscribe 从服务文件到各自的.ts 文件的功能。

注意：我只在一个函数中获得订阅数据，而不是每个函数。换句话说，我在getProductData() 函数中获得了两个API res。我不知道为什么。

如果有人有解决方案，请帮助我。

【问题讨论】：

forkJoin() 将有助于一次拨打多个电话
@JavascriptLover-SKT 我尝试使用它，并且我在控制台中以数组的形式获取数据。但后来我的subscribe 不工作了。这就是问题所在。
当我直接从ts 拨打电话时，它也会很有用。但是我已经使用服务来重用代码。

标签： angular request observable

【解决方案1】：

你可以使用

forkJoin()

同时处理多个呼叫，您可以呼叫多个request，订阅后您将获得array的响应。

例如

    forkJoin(Service1.call1, 
     Service2.call2)
    .subscribe(([call1Response, call2Response]) => {

其中 service1 和 service2 是具有函数 ccall1 和 call2 的服务，它们具有 return 类型 Observable

你可以找到更多Here

【讨论】：

我已经尝试使用forkJoin，但它会一次性返回所有数据。然后我无法将值返回给ts。我的意思是当我使用forkJoin 时，我的subscribe 不起作用。
您可以只返回 forkJoin(Service1.call1, Service2.call2) 或者如果您订阅它，那么您应该将结果作为可观察返回：forkJoin(Service1.call1, Service2.call2)。 subscribe(() => //返回包含结果的新 observable )

【解决方案2】：

简单方法

使用 forkjoin()

public sample(): Observable<any[]>
{

let call1=this.http.get(this._url+'/v1/sample1')

let call2=this.http.get(this._url+'/v1/sample2')

let call3=this.http.get(this._url+'/v1/sample3')

return forkJoin([call1, call2,call3]);

}

【讨论】：

感谢 asifali。真的很简单。我在我的代码中使用过。并且工作正常

【解决方案3】：

使用来自rxjs 的zip 库

import { zip } from "rxjs";

myFun() {    
   zip(service.api1, service.api2)
       .subscribe(([response1, response2]) => {
          console.log(response1);
          console.log(response2);
    })
}

【讨论】：