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);
      });