Вызовите API в Angular несколько раз, если он не удался - PullRequest
Новая
       1

Вызовите API в Angular несколько раз, если он не удался

0 голосов
/ 16 ноября 2018

По какой-то причине мой внешний вызов API работает только 80% времени, поэтому, если он терпит неудачу, я хотел бы попытаться вызвать его еще 2-3 раза, прежде чем выдать ошибку. Это возможно?

Ниже приведен код из моих файлов компонентов и сервисов. Ошибка, которую я выдаю, находится в моем файле компонента с функцией getCars (). API, который я вызываю, размещен на Heroku.

Компонент 

import { Component, OnInit } from '@angular/core';
import { CarsService, Car } from '../cars.service';

@Component({
  selector: 'app-car',
  templateUrl: './car.component.html',
  styleUrls: ['./car.component.css']
})
export class CarComponent implements OnInit {

  cars: Car[];

  constructor(
    public carService: CarsService
  ) { 
    this.getCars();
  }

  getCars(){
    this.carService.getCars().subscribe(
      data => {
        this.cars = data;
      },
      error => {
        alert("Could not retrieve a list of cars");
      }
    )
  };

Услуги 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

export interface Car {
  make: string;
  model: string;
  year: string;
}

@Injectable({
  providedIn: 'root'
})
export class CarsService {

  baseUrl = environment.baseUrl;

  constructor(
    public http: HttpClient
  ) { }

  getCars() {
    let url = this.baseUrl + '/api/car'
    return this.http.get<Car[]>(url);
  }
}

1 Ответ

0 голосов
/ 16 ноября 2018

Для этого вы можете использовать оператор retry.

Следующий пример, например, будет повторяться 3 раза, прежде чем окончательно вернет ошибку. 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';
import { retry } from 'rxjs/operators';

export interface Car {
  make: string;
  model: string;
  year: string;
}

@Injectable({
  providedIn: 'root'
})
export class CarsService {

  baseUrl = environment.baseUrl;

  constructor(
    public http: HttpClient
  ) { }

  getCars() {
    let url = this.baseUrl + '/api/car'
    return this.http.get<Car[]>(url)
      .pipe(
        retry(3)
      )
  }
}

Вот Образец StackBlitz для вашей ссылки. Если вы посмотрите на StackBlitz, откройте Dev Tools и откройте вкладку Network. Он отправит запрос примерно 3 раза, и если во всех случаях произойдет сбой, он выдаст сообщение об ошибке.

...