Question

尝试管道处理两个Angular http调用，仅在第一个失败时才执行第二个。

第一个电话是：

 return this.http.get<AssetGroupHistoryResponseModel>('./assets/data.json');

如果data.json不存在，则会引发404 Not Found错误，并且应调用正确的API：

return this.http.get<AssetGroupHistoryResponseModel>(url);

不知道如何使用rxjs获得这种行为。

Answer 1

您可以使用RXJS中的catchError运算符来实现。

在这里，尝试一下：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getData()
      .subscribe(
        res => console.log(res)
      )
  }

  getData() {
    return this.http.get('http://jsonplaceholder.typicode.com/posts/1')
      .pipe(
        catchError(error => this.http.get('https://jsonplaceholder.typicode.com/users/1'))
      );
  }
}

PS：请注意，第一个API调用将导致错误，因为它使用http，而应用程序将在https上运行。因此，您将获得user数据而不是post数据记录到控制台。

这是您推荐的Working Sample StackBlitz。

Answer 2

您可以查看Angular中的错误处理。使用RxJS中的Angular的HttpClient和catchError，我们可以轻松地编写一个函数来处理每个服务中的错误。当第一个返回第一个错误时，只需触发第二个http cal。

Example Here

仅在第一次失败时才执行第二次http通话

2 个答案: