面试题：Angular服务调用时如何处理异步操作及错误

Question

假设你有一个Angular服务用于获取后端数据，该操作是异步的。描述如何在服务中实现该异步调用（例如使用Observable或Promise），并且在组件调用这个服务时，如何优雅地处理可能出现的错误情况，给出具体代码示例。

Answer 1

在Angular服务中使用Observable实现异步调用

1. 创建服务 首先，使用Angular CLI创建一个服务：

ng generate service data-fetch

在data - fetch.service.ts文件中编写如下代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, catchError, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataFetchService {
  private apiUrl = 'your - api - url';

  constructor(private http: HttpClient) {}

  fetchData(): Observable<any> {
    return this.http.get<any>(this.apiUrl)
    .pipe(
        catchError(this.handleError)
      );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.status === 0) {
      console.error('An error occurred:', error.error);
    } else {
      console.error(
        `Backend returned code ${error.status}, body was: `, error.error);
    }
    return throwError(() => new Error('Something went wrong; please try again later.'));
  }
}

2. 在组件中调用服务并处理错误 在组件的component.ts文件中：

import { Component } from '@angular/core';
import { DataFetchService } from './data - fetch.service';

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html',
  styleUrls: ['./my - component.css']
})
export class MyComponent {
  data: any;
  errorMessage: string = '';

  constructor(private dataFetchService: DataFetchService) {}

  ngOnInit() {
    this.dataFetchService.fetchData().subscribe({
      next: (response) => {
        this.data = response;
      },
      error: (error) => {
        this.errorMessage = error.message;
      }
    });
  }
}

在Angular服务中使用Promise实现异步调用

1. 创建服务 在data - fetch.service.ts文件中编写如下代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataFetchService {
  private apiUrl = 'your - api - url';

  constructor(private http: HttpClient) {}

  fetchData(): Promise<any> {
    return new Promise((resolve, reject) => {
      this.http.get<any>(this.apiUrl).subscribe({
        next: (response) => {
          resolve(response);
        },
        error: (error) => {
          reject(error);
        }
      });
    });
  }
}

2. 在组件中调用服务并处理错误 在组件的component.ts文件中：

import { Component } from '@angular/core';
import { DataFetchService } from './data - fetch.service';

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html',
  styleUrls: ['./my - component.css']
})
export class MyComponent {
  data: any;
  errorMessage: string = '';

  constructor(private dataFetchService: DataFetchService) {}

  ngOnInit() {
    this.dataFetchService.fetchData().then((response) => {
      this.data = response;
    }).catch((error) => {
      this.errorMessage = error.message;
    });
  }
}

以上代码展示了在Angular服务中分别使用Observable和Promise实现异步调用，并在组件中优雅处理错误的方式。使用Observable时，可以利用RxJS的操作符进行更灵活的处理，而Promise则是较为传统的异步处理方式。