仅当第一次失败时才执行第二次 http 调用

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

您可以使用catchErrorRXJS的操作符来实现这一点。

在这里，试试这个：

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：请注意，http当应用程序将在https. 因此，您将获得user记录到控制台的post数据而不是数据。

这是供您参考的工作示例 StackBlitz。