面试题：Angular HTTP请求重试机制的实现思路与代码示例

Question

假设在Angular应用中，由于网络波动等原因，部分HTTP请求可能会失败，需要实现一个重试机制。请阐述实现该重试机制的主要思路，并给出具体的代码示例。要求可以设置重试次数、重试间隔时间，并且在每次重试前记录日志。

Answer 1

实现思路

1. 捕获HTTP请求错误：使用catchError操作符捕获HTTP请求过程中发生的错误。
2. 设置重试逻辑：根据设置的重试次数，使用retryWhen操作符来定义重试机制。
3. 控制重试间隔时间：在retryWhen中使用delay操作符来设置每次重试之间的间隔时间。
4. 记录日志：在每次重试前使用tap操作符记录日志。

代码示例

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, delay, map, retryWhen, tap } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpService {
  constructor(private http: HttpClient) {}

  public get<T>(url: string, options: {
    retryCount: number;
    retryDelay: number;
  }): Observable<T> {
    return this.http.get<T>(url).pipe(
      catchError(error => {
        console.error('Initial request failed:', error);
        return throwError(error);
      }),
      retryWhen(errors => errors.pipe(
        tap((error: any, index: number) => {
          console.error(`Retry ${index + 1} due to error:`, error);
        }),
        delay(options.retryDelay),
        map((error: any, index: number) => {
          if (index >= options.retryCount - 1) {
            throw error;
          }
          return error;
        })
      ))
    );
  }
}

在组件中使用：

import { Component } from '@angular/core';
import { HttpService } from './http.service';

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

  ngOnInit() {
    this.httpService.get<any>('your-url', {
      retryCount: 3,
      retryDelay: 2000
    }).subscribe(data => {
      console.log('Success:', data);
    }, error => {
      console.error('Final error after retries:', error);
    });
  }
}