Angular7_获取异步方法里面的数据

1.回调函数

  getName() {

    return '张三';

  }

  getAsyncName() {

    setTimeout(() => {

      return 'async_张三';

    }, );

  }

　　这是我们定义好的两个函数，当调用这两个函数的时候，因为setTimeout是异步的，所以并不能正常返回值，补全返回类型可以使我们更加直观的看出效果。

  getName(): string

  getAsyncName(): void

　　console.log(this.getName()); //输出：张三

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

　　这时候，要获取返回值，就需要使用回调函数，将getAsyncName（）修改成

  getAsyncName(back) {

    setTimeout(() => {

      back('async_张三');

    }, );

  }

　　调用

this.getAsyncName((data) => {

      console.log(data);

    });

成功输出：async_张三

2.Promise处理异步

  getPromiseData() {

    return new Promise((success, error) => {

      setTimeout(() => {

        success('promise_张三');

      }, );

    });

  }

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_张三');

      }, );

    });

  }

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 = ;

    return new Observable((obserber) => {

      setInterval(() => {

        i++;

        obserber.next('rxjs_张三_Interval_' + i);

      }, );

    });

  }

　　调用

    this.getObservable_Interval_Data().subscribe((data) => {

      console.log(data);

    });

　　结果：每隔一秒打印一个值

　　c.工具函数（pip管道，filter过滤器，map操作）

　　我们先写一个方法，从1开始递增打印

  getObservable_Num_Data() {

    let i = ;

    return new Observable((obserber) => {

      setInterval(() => {

        i++;

        obserber.next(i);

      }, );

    });

  }

　　调用

    this.getObservable_Num_Data().subscribe((data) => {

      console.log(data);

    });

　　好，这很容易，前面也提到过了，但是现在我们不改变原本的函数，但是只要打印偶数呢（对值进行筛选）

import { filter } from 'rxjs/operators';

　　修改函数如下：

    this.getObservable_Num_Data()

      .pipe(

        filter((value: number) => {

          if (value %  === ) {

            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 %  === ) {

            return true;

          }

        }),

        map((value: number) => {

          return value * value;

        }),

        map((value: number) => {

          return value * ;

        })

      )

      .subscribe((data) => {

        console.log(data);

      });

巴特西

Angular7_获取异步方法里面的数据

最新文章

热门文章