Angular笔记异步与异步方法处理

Angular中处理异步方法。

   当外部去调用此方法接收的返回值,由于是异步,方法执行完毕了,也没有产生返回值,所以得到的result是undifined       

解决:

1.在此异步的方法添加一个回调函数,在回调函数中值,并带出 。

服务中定义的方法:

    getCallBack02(callback){//callbanck为回调函数,他的参数既是带出的值

 setTimeout(() => {

      var result="resultCallBack";

       callback(result+"callback回调函数");

    }, 1000);

  }

组件处理业务代码(展示异步方法处理的结果):

   this.reuqest.getCallBack02(

    //回调函数,回调函数带的结果赋值给此函数的形参

      (result)=>{

      console.log(result);

      }

    );

2.通过Promise方法处理异步

服务中定义的方法:

getCallBack03(){

    //实例化 promise方法,参数resolve:方法执行成功所返回,reject:方法执行失败所返回

    return new Promise((resolve)=>{

      setTimeout(() => {

        var result="resultCallBack--promise";

         resolve(result);

      }, 5000);

    })    

  }

组件处理业务代码(展示异步方法处理的结果):

//调用通过promise处理的异步方法,返回的是promise对象,通过其中then方法获取返回值

    var promise=this.reuqest.getCallBack03();

    promise.then((data)=>{

         console.log(data); 

    })

3.通过Rxjs处理

在服务引入: import { Observable } from 'rxjs';

1.引入Observable import { Observable } from 'rxjs';

2.实例化 Observable  传入异步方法 通过Observable.next(结果)方法返回结果

服务中定义的方法:    

 getObservable(){

  return new Observable((observable)=>{

  setTimeout(() => {

        var result="resultCallBack--rxjs的Observable";

        observable.next(result);

      }, 5000);

    })

   }

组件处理业务代码(展示异步方法处理的结果):

  //调用通过rxjs处理的异步方法

    var observable=this.reuqest.getObservable();

    let chehui=  observable.subscribe((data)=>{

         console.log(data); 

    //在rxjs中可以撤回subscribe操作

    })

//撤回

    setTimeout(() => {

      chehui.unsubscribe();

      console.log("撤回了。。。。 ");

    }, 2000);

rxjs可以操作返回值的结果:

引入import{map,filter} from 'rxjs/operators'

   //可以通过rxjs 的map filter进行结果处理  删选

   /* var observableNum=this.reuqest.getObservableIntervalNum();

    let streamNum=  observableNum.pipe(

      filter((value)=>{    //value是异步方法的结果,待处理的值

          if(value%2==0){  //判断是否是偶数 true  就将其返回

            return true;

          }

      })

    )     

.subscribe((data)=>{

         console.log(data); 

    //在rxjs中可以撤回subscribe操作Num

    })

*/

      //map  可以继续操作结果

  var observableNum=this.reuqest.getObservableIntervalNum();

    let streamNum=  observableNum.pipe(

      filter((value)=>{    //value是异步方法的结果,待处理的值

        if(value%2==0){  //判断是否是偶数 true  就将其返回

          return true;

        }

    }),

      map((value)=>{    //value是异步方法的结果,待处理的值

         return value+20;

      })

    )     

    .subscribe((data)=>{

         console.log(data); 

    //在rxjs中可以撤回subscribe操作Num

    })

  }

rxjs可以循环的带出数据

 //通过rxjs处理异步方法可以通过延时器 多次执行  promise则不行

   getObservableInterval(){

      var count:number=0;

    return new Observable((observable)=>{

      setInterval(() => {

        count++;

        var result="resultCallBack--rxjs的Observable"+count;

        observable.next(result);

      }, 5000);

    })

   }

你可能感兴趣的:(Angular笔记异步与异步方法处理)