在Angular中，使用pipe、map和catchError是非常有用的方式来处理异步操作和错误。下面是一个使用这些方式的示例代码：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `
    Get Data
    
{{ data }}
    
{{ error }}
  `
})
export class ExampleComponent {
  data: any;
  error: any;

  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('https://api.example.com/data')
      .pipe(
        map((res: any) => res.data), // 提取出data字段
        catchError((err: any) => {
          this.error = '请求出错';
          return throwError(err);
        })
      )
      .subscribe(
        (res: any) => {
          this.data = res;
        }
      );
  }
}

在上面的代码中，我们创建了一个Angular组件ExampleComponent，其中包含一个按钮和一个用于显示数据的div元素。当点击按钮时，我们通过HttpClient发送一个异步请求来获取数据。

在getData方法中，我们使用http.get方法发送请求，并在pipe方法中使用map操作符将响应中的data字段提取出来。如果请求出错，我们使用catchError操作符捕获错误并返回一个自定义的错误信息。最后，我们通过subscribe方法订阅Observable来处理成功的响应和错误。

这种使用pipe、map和catchError的方式能够更好地处理异步操作和错误，使代码更具可读性和可维护性。