记录angular rxjs异步

1. 在service.js引入Observable

import { Observable } from 'rxjs';

2. 在service.js写

getObservable() {
    return new Observable((observer) => {
      setTimeout(() => {
        observer.next('12222222222'); //请求成功返回next()
        observer.error('error')//请求出错使用这个
      }, 2000);
    });
  }

3. 在需要用的页面导入service文件

import { StorageService } from '../../service/storage.service';

4. 通过构造器赋值

constructor(public storage:StorageService){}

5. 然后在页面正常写事件，传参进去

getService() {
    let rxjsData = this.storage.getObservable();
    rxjsData.subscribe((data) => {
      console.log(data);
    });
  }

使用map,filter

1. 导入

import { map, filter } from ‘rxjs/operators’;

2.在subscribe之前使用pipe方法

//filter
 }
  getService() {
    let rxjsData = this.storage.getObservable();
    rxjsData
      .pipe(
        filter((value: any) => {
          if (value % 2 === 0) {
            return true;
          }
        })
      )
      .subscribe((data) => {
        console.log(data);
      });
  }

// map
getService() {
    let rxjsData = this.storage.getObservable();
    rxjsData
      .pipe(
        map((value: any) => {
          return value * value;
        })
      )
      .subscribe((data) => {
        console.log(data);
      });
  }

map,filter结合使用

getService() {
    let rxjsData = this.storage.getObservable();
    rxjsData
      .pipe(
        filter((value: any) => {
          if (value % 2 === 0) {
            return true;
          }
        }),
        map((value: any) => {
          return value * value;
        })
      )
      .subscribe((data) => {
        console.log(data);
      });
  }