Angular7_獲取異步方法裏面的數據

1.回調函數

  getName() {
    return '張三';
  }
  getAsyncName() {
    setTimeout(() => {
      return 'async_張三';
    }, 1000);
  }

　　這是咱們定義好的兩個函數，當調用這兩個函數的時候，由於setTimeout是異步的，因此並不能正常返回值，補全返回類型可使咱們更加直觀的看出效果。

  getName(): string 
  getAsyncName(): void 

　　console.log(this.getName());   //輸出：張三

　　console.log(this.getAsyncName());   //輸出：undefined

　　這時候，要獲取返回值，就須要使用回調函數，將getAsyncName（）修改爲

  getAsyncName(back) {
    setTimeout(() => {
      back('async_張三');
    }, 1000);
  }

　　調用

this.getAsyncName((data) => {
      console.log(data);
    });

成功輸出：async_張三

 2.Promise處理異步

  getPromiseData() {
    return new Promise((success, error) => {
      setTimeout(() => {
        success('promise_張三');
      }, 1000);
    });
  }

ps：error爲失敗回調函數，能夠不寫

　　調用

    this.getPromiseData().then((data) => {
      console.log(data);
    });

3.Observable（集成在rxjs模塊）

import { Observable } from 'rxjs';

 

  getObservableData() {
    return new Observable((obserber) => {
      setTimeout(() => {
        obserber.next('rxjs_張三');
      }, 1000);
    });
  }

ps：失敗回調爲obserber.error（'失敗'）；

　　調用

    this.getObservableData().subscribe((data) => {
      console.log(data);
    });

　　可見Promise和Observable很是類似

　　（Observable強大一點，能夠取消訂閱、循環監聽、提供多種工具函數）

　　a.取消訂閱

    const d = this.getObservableData().subscribe((data) => {
      console.log(data);
    });
    d.unsubscribe(); // 取消訂閱

　　因爲getObservableData方法是一秒後執行的，程序得到返回值以前執行了取消訂閱，因此這裏將不打印出結果

　　b.循環監聽

　　先寫一個異步循環函數，每隔一秒返回一個值

  getObservable_Interval_Data() {
    let i = 1;
    return new Observable((obserber) => {
      setInterval(() => {
        i++;
        obserber.next('rxjs_張三_Interval_' + i);
      }, 1000);
    });
  }

　　調用

    this.getObservable_Interval_Data().subscribe((data) => {
      console.log(data);
    });

　　結果：每隔一秒打印一個值

　　

 　　c.工具函數（pip管道，filter過濾器，map操做）

　　咱們先寫一個方法，從1開始遞增打印

  getObservable_Num_Data() {
    let i = 0;
    return new Observable((obserber) => {
      setInterval(() => {
        i++;
        obserber.next(i);
      }, 1000);
    });
  }

　　調用

    this.getObservable_Num_Data().subscribe((data) => {
      console.log(data);
    });

　　好，這很容易，前面也提到過了，可是如今咱們不改變本來的函數，可是隻要打印偶數呢（對值進行篩選）

import { filter } from 'rxjs/operators';

　　修改函數以下：

    this.getObservable_Num_Data()
      .pipe(
        filter((value: number) => {
          if (value % 2 === 0) {
            return true;
          }
        })
      )
      .subscribe((data) => {
        console.log(data);
      });

　　如今咱們要打印值的二次冪呢（對值進行操做）

import { map } from 'rxjs/operators';

　　修改函數以下：

    this.getObservable_Num_Data()
      .pipe(
        map((value: number) => {
          return value * value;
        })
      )
      .subscribe((data) => {
        console.log(data);
      });

　　還有，就是補充一點，pipe管道能夠對值進行屢次操做，用逗號隔開，執行順序從上到下

　　如：

    this.getObservable_Num_Data()
      .pipe(
        filter((value: number) => {
          if (value % 2 === 0) {
            return true;
          }
        }),
        map((value: number) => {
          return value * value;
        }),
        map((value: number) => {
          return value * 2;
        })
      )
      .subscribe((data) => {
        console.log(data);
      });