RxJS中的catch和catchError有什么区别？如何处理API调用返回的网络错误？

import { Observable } from 'rxjs';

const source$ = new Observable(observer => {
  observer.next('A');
  observer.next('B');
  throw new Error('Error occurred');
});

const result$ = source$.catch(error => {
  console.log('Caught error:', error.message);
  return Observable.of('C');
});

result$.subscribe(value => console.log(value));

A
B
Caught error: Error occurred
C

import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

const source$ = of('A', 'B').pipe(
  catchError(error => {
    console.log('Caught error:', error.message);
    return of('C');
  })
);

source$.subscribe(value => console.log(value));

A
B
Caught error: Error occurred
C

import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

function makeAPICall(): Observable<any> {
  // 假设这里是一个发起API调用的函数
  // 返回一个Observable，表示API的响应
  return apiCall();
}

makeAPICall().pipe(
  catchError(error => {
    if (error.status === 404) {
      console.log('API not found');
      return of({ data: null });
    } else {
      console.log('Network error occurred');
      throw new Error('Network error');
    }
  })
).subscribe(response => {
  if (response.data) {
    console.log('API response:', response.data);
  } else {
    console.log('API not found');
  }
});