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