在角度 9 中使可观察的调用同步答案

【问题标题】：Make observable call synchronous in angular 9在角度 9 中使可观察的调用同步
【发布时间】：2020-08-09 16:43:40
【问题描述】：

我对 HTTP 请求使用 observable 我想将其作为同步调用，因为我是 rxjs 的新手。下面的代码用于进行多次调用，所以在所有调用完成后，我只需要调用驱动方法。我参考了很多链接，但我无法理解请帮助我。

服务调用接口：

public createHttpRequests(
    method: string,
    url: string,
    payload?: any,
    params?: any,
 
  ): Observable<any> {
    switch ((method).toLowerCase()) {
      case 'get': return this.createHttpGet(url, params);
      case 'post': return this.createHttpPost(url, payload);
      default: return this.http.get('');
    }
  }

我的服务电话如下：

  public ngOnInit(): void {


this.serviceCall.createHttpRequests('get', this.someService.getUserList, {}, {}).pipe(
  map((result: Iuserlist) => {
    if (result.body.statusCode ===  200) {
    
    } else {
   
    }
  }),
).subscribe();
this.serviceCall.createHttpRequests('get', this.someService.getsomeData, {}, {}).pipe(
  map((result: Isomedatas) => {
    if (result.body.statusCode ===  200) {
    
    } else {
   
    }
  }),
).subscribe();

//This method should call after the above api completion 
this.getDriverDetails();
 }

【问题讨论】：

不要进行同步网络请求。异步的不只是 observables，还有下划线的浏览器 HTTP 请求。我知道 RX 可能有点让人不知所措，但您不必使用 RX。基于 Promise 的异步请求现在具有 async await 语法糖，易于理解和学习。

标签： angular rxjs observable angular8 angular9

【解决方案1】：

为此，您可以使用来自rxjs 的combineLatest 函数。

使用下面的代码。

public createHttpRequests(
  method: string,
  url: string,
  payload? : any,
  params? : any,

): Observable<any> {
  switch ((method).toLowerCase()) {
    case 'get':
      return this.createHttpGet(url, params);
    case 'post':
      return this.createHttpPost(url, payload);
    default:
      return this.http.get('');
  }
}
// And my service call is below:
public ngOnInit(): void {
  const userList$ = this.serviceCall.createHttpRequests('get', this.someService.getUserList, {}, {}).pipe(
    map((result: Iuserlist) => {
      if (result.body.statusCode === 200) {

      } else {

      }
    }),
  );

  const someData$ = this.serviceCall.createHttpRequests('get', this.someService.getsomeData, {}, {}).pipe(
    map((result: Isomedatas) => {
      if (result.body.statusCode === 200) {

      } else {

      }
    }),
  );

  combineLatest([userList$, someData$]).subscribe(([userList, someData]) => {
    console.log(userList);
    console.log(userList);

    this.getDriverDetails();
  });
}

【讨论】：

让我试试这个。那么为什么我们使用forkjoin和merge map，flat map你能告诉我是rxjs的新手，感觉很难学
这些是 rxjs 的不同功能。您可以从谷歌阅读它们之间的区别。如果它适合你，请接受我的回答。

【解决方案2】：

使用 async/await 可以实现 observable 同步，但我认为这是一个坏主意，更好的方法是使用 forkJoin，因为您希望在完成 2 个 observable 后执行代码。

forkJoin({
  firstService: this.firstService$,
  secondService: this.secondService$});
.subscribe({
 next: value => {
  //this  will run once both observables are completed. 
  console.log(value); 
  // Logs:
  // { firstService: response, secondService: response, } 
  //call your function here 
  this.getDriverDetails();
  }
});

【讨论】：