时间戳

首页 > 解决方案 > 仅在第一次失败时执行第二次 http 调用

angular - 仅在第一次失败时执行第二次 http 调用

问题描述

尝试通过管道传递两个 Angular http 调用，其中第二个调用仅在第一个失败时才执行。

第一个电话是：

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

如果 data.json 不存在，则会引发 404 Not Found 错误，它应该调用适当的 API：

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

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

标签： angularhttprxjsreactive-programming

解决方案

您可以使用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：请注意，第一次 API 调用会导致错误，因为它http在应用程序运行时使用https。因此，您将获得user记录到控制台的数据而不是post数据。

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

推荐阅读