GVKun编程网logo

Rxjs异步编程的学习(异步编程 js)

11

本文将为您提供关于Rxjs异步编程的学习的详细介绍,我们还将为您解释异步编程js的相关知识,同时,我们还将为您提供关于angular之Rxjs异步数据流编程入门、angular使用rxjs异步方法、a

本文将为您提供关于Rxjs异步编程的学习的详细介绍,我们还将为您解释异步编程 js的相关知识,同时,我们还将为您提供关于angular之Rxjs异步数据流编程入门、angular使用 rxjs异步方法、async 和 await 之异步编程的学习、ES6 --- JS异步编程的几种解决方法及其优缺点的实用信息。

本文目录一览:

Rxjs异步编程的学习(异步编程 js)

Rxjs异步编程的学习(异步编程 js)

1. Rxjs是ReactiveX编程理念的javascript版本。ReactiveX来自微软,它是一种针对异步数据流的编程。简单来说,它将一切数据,包括http请求,dom事件,或者普通数据等包装成流的形式,然后用强大丰富的操作符对流进行处理,使你能以同步编程的方式处理异步数据,并组合不同的操作符来轻松优雅的实现你所需要的功能。

RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程,可不管如何解释rxjs其目标就是异步编程,angular引入Rxjs为了就是异步可控,更简单。

2. 目前常用的异步编程的几种方法:

  • 回调函数
  • 事件监听/发布订阅
  • promise
  • Rxjs

3. 先来看看同步方法

service:

  constructor() {
  }


  // asyn function
  getData() {
    return ''async message'';
  }


component.ts

  ngOnInit(): void {

    const data = this.rxjsDemoService.getData();
    console.log(data);
}

4. 利用回调函数 来处理异步数据

service:

 getCallbackData(cb) {
    setTimeout(() => {
      const name = ''lily'';
      cb(name);
    }, 1000);
  }

// setTimeout 为定时器,一秒钟执行执行

component.ts

    this.rxjsDemoService.getCallbackData((value) => {
      console.log(value);
    });

5. 利用promise来处理异步数据

// promise 异步
  getPromiseData() {
    return new Promise((resolve, rejects) => {
      setTimeout(() => {
        const name = ''lily promise'';
        resolve(name);   // 成功的时候返回的数据
        // rejects(''error''); // 失败的时候返回的数据
      }, 1000);
    });
  }

conponent:

   const promiseData = this.rxjsDemoService.getPromiseData();
    promiseData.then(value => console.log(value));

 6. 利用rxjs来处理异步数据

 // rxjs 异步数据
  getRxjsData() {
    return new Observable((observer) => {
      setTimeout(() => {
        const name = ''lily rxjs'';
        observer.next(name);   // 成功的时候返回的数据
      }, 3000);
    });
  }


component:
 const rxjsData = this.rxjsDemoService.getRxjsData();
    rxjsData.subscribe(value => console.log(value)); //获取数据

    const d = rxjsData.subscribe(value => console.log(value));
    setTimeout(() => {
      d.unsubscribe();
    }, 1000);  //取消获取数据

7. 利用rxjs来进行多次获取数据,循环


 // rxjs 异步数据 ,可以循环执行多次;而promise只能执行一次
  getRxjsInternalData() {
    return new Observable<any>((observer) => {
      let count = 0;
      setInterval(() => { // setInternal 为延时器
        count++;
        // const name = ''lily rxjs'' + count;
        const name = +count;
        observer.next(name);   // 成功的时候返回的数据
      }, 1000);
    });
  }
component:
const rxjsInternalData = this.rxjsDemoService.getRxjsInternalData(); rxjsInternalData.subscribe(value => console.log(value));

8. rxjs的map和filter属性

// rxjs 异步数据 ,可以循环执行多次
  getRxjsInternalData() {
    return new Observable<any>((observer) => {
      let count = 0;
      setInterval(() => {
        count++;
        // const name = ''lily rxjs'' + count;
        const name = +count;
        observer.next(name);   // 成功的时候返回的数据
      }, 1000);
    });
  }


component

 const stream = this.rxjsDemoService.getRxjsInternalData();
    stream.pipe(
      filter((value => {
        if (value % 2 === 0) {  // 先过滤只取偶数
          return true;
        }
      })),
      map((value) => {
        return value * value;  // 偶数*偶数
      })
    ).subscribe(value => console.log(value));

 

angular之Rxjs异步数据流编程入门

angular之Rxjs异步数据流编程入门

Rxjs介绍

 

参考手册:https://www.npmjs.com/package/rxjs

中文手册:https://cn.rx.js.org/

RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软,它是一种针对异步数据 流的编程。简单来说,它将一切数据,包括 HTTP 请求,DOM 事件或者普通数据等包装成流 的形式,然后用强大丰富的操作符对流进行处理,使你能以同步编程的方式处理异步数据, 并组合不同的操作符来轻松优雅的实现你所需要的功能。

RxJS 是一种针对异步数据流编程工具,或者叫响应式扩展编程;可不管如何解释 RxJS 其目 标就是异步编程,Angular 引入 RxJS 为了就是让异步可控、更简单。

RxJS 里面提供了很多模块。这里我们主要给大家讲 RxJS 里面最常用的 Observable 和 fromEvent。

 

目前常见的异步编程的几种方法:

1、回调函数

2、事件监听/发布订阅

3、Promise
4、Rxjs


 

 

import { Injectable } from ''@angular/core'';


import {Observable} from ''rxjs'';


@Injectable({
  providedIn: ''root''
})
export class RequestService {

  constructor() { }


  //同步
  getData(){

    return ''this is service data'';
  }

  getCallbackData(cb){

    setTimeout(() => {

      var username=''张三'';

      // return username;     
      cb(username);
      
    }, 1000);

  }

  getPromiseData(){
    

      return new Promise((resolve)=>{      
          setTimeout(() => {
              var username=''张三--Promise'';
              resolve(username);        
            
          }, 3000); 
      })
  
  }

  getRxjsData(){


      return new Observable<any>((observer)=>{
          setTimeout(() => {
              var username=''张三--Rxjs'';
              observer.next(username);     
              // observer.error(''数据'')        
          }, 3000); 
      })

  }



  //多次执行

  getPromiseIntervalData(){
    
    return new Promise((resolve)=>{      
        setInterval(() => {
            var username=''张三--Promise  Interval'';
            resolve(username);        
          
        }, 1000); 
    })

   }

   getRxjsIntervalData(){


        let count=0;
        return new Observable<any>((observer)=>{
            
            setInterval(() => {

                count++;
                var username=''张三--Rxjs-Interval''+count;
                observer.next(username);     
                // observer.error(''数据'')        
            }, 1000); 
        })

    }



    getRxjsIntervalNum(){


        let count=0;
        return new Observable<any>((observer)=>{
            
            setInterval(() => {

                
                count++;
                observer.next(count);     
                // observer.error(''数据'')        
            }, 1000); 
        })

    }

}

 

import { Component, OnInit } from ''@angular/core'';
import { RequestService } from ''../../services/request.service'';
import {map,filter} from ''rxjs/operators'';
@Component({
  selector: ''app-home'',
  templateUrl: ''./home.component.html'',
  styleUrls: [''./home.component.scss'']
})
export class HomeComponent implements OnInit {

  constructor( public request:RequestService) { 
    
  }
  runParent(msg:string){

  //接收子组件传递过来的数据 runParent(msg:string){
    alert(msg);
  }
  public title=''新闻标题''
  ngOnInit() {
    //1、同步方法

    let data=this.request.getData();

    console.log(data);



    //2、callback获取异步数据

    this.request.getCallbackData((data)=>{

      console.log(data);

    });

    //3、promise获取异步数据

    var promiseData=this.request.getPromiseData();

    promiseData.then((data)=>{

      console.log(data);
    })

      //4、rxjs获取异步方法里面的数据


      var rxjsData=this.request.getRxjsData();
      rxjsData.subscribe((data)=>{
          console.log(data);
      })



      //5、过一秒以后撤回刚才的操作


      var Streem=this.request.getRxjsData();

      var d=Streem.subscribe((data)=>{
          console.log(data);
      })


      setTimeout(()=>{

        d.unsubscribe();  /*取消订阅*/

      },1000)

      



      //6、promise 执行多次(没有这个能力)


      var intervalData=this.request.getPromiseIntervalData();

      intervalData.then((data)=>{

         console.log(data);
      })


      //7、rxjs执行多次

      var StreemInterval=this.request.getRxjsIntervalData();

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



      //8、用工具方法对返回的数据进行处理



      
        var StreemNum=this.request.getRxjsIntervalNum();
        StreemNum.pipe(
          filter((value)=>{

              if(value%2==0){
                return true;
              }
          })
        )      
        .subscribe((data)=>{
            console.log(data);
        })
      


      
           var StreemNum=this.request.getRxjsIntervalNum();
            StreemNum.pipe(
              map((value)=>{

                return value*value;
              })
            )      
            .subscribe((data)=>{
                console.log(data);
            })
            


      
      



     var StreemNum=this.request.getRxjsIntervalNum();
     StreemNum.pipe(
       filter((value)=>{

          if(value%2==0){
            return true;
          }
      }),
       map((value)=>{

         return value*value;
       })
     )      
     .subscribe((data)=>{
         console.log(data);
     })
     
  }
  
}

 

 

 

总结

以上是小编为你收集整理的angular之Rxjs异步数据流编程入门全部内容。

如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。

原文地址:https://www.cnblogs.com/loaderman/p/10906222.html

angular使用 rxjs异步方法

angular使用 rxjs异步方法

1.首先要引入Observable模块

Import {Observable} from ''rxjs'';

2.实例化

let stream =  new Observable(observer => {

       setTimeout(() => {

    observer.next(''observable timeout'');

},2000);

});

3.发布

stream.subscribe(value => console.log(value));

 

 

async 和 await 之异步编程的学习

async 和 await 之异步编程的学习

      async修改一个方法,表示其为异步方法。而await表示等待一个异步任务的执行。js方面,在es7中开始得以支持;而.net在c#5.0开始支持。本文章将分别简单介绍他们在js和.net中的基本用法。

一、在js中的实现

js中的异步,还是基于Promise实现的。没有Promise就办法谈异步了。并且await只能出现async修改的方法中;以及reject会触发catch(异常)。

class AsyncTest{
    //simple example
    async run(){
        //按照顺序等待后输出
        let one = await this.output("one", 1000);
        console.log(''output:'' + one);
        let two = await this.output("two", 3000);
        console.log(two);
        console.log(''run.....'');
    }
    //await and Promise.all difference
    async runDiff(){ 
        let one = this.output(''diff one'', 2000);
        let two = this.output(''diff two'', 2000);
        console.log(  await two + await one );  //在2秒之后,两个都输出了,而不是各自都等待两秒
        console.log(''runDiff.....'');
    }

    //Promise.all realize
    runAll(){
        let nowTime = new Date();
        console.log(''b:'' + nowTime.toTimeString());
        let array = ["a", "b", "c"];
        let that = this;
        array.forEach(async function(item){
            console.log( await that.output(item, 2000) );//2秒后同时输出
        });
        let fn = async ()=>{
            for(let item of array){
                let v = await this.output(item, 2000);
                console.log(v ); //分步骤两秒执行
            }
        }
        fn.call(this);
    }

    premosFn(){
        let nowTime = new Date();
        console.log(''b:'' + nowTime.toTimeString());
        let array = ["a", "b", "c"];
        let that = this;
        //promise.all
        let preFn = async function(){
            let promises = array.map(function(item){
                return that.output(item,2000); //同时开启多个定时器
            });
            let r = await Promise.all(promises);
            console.log(r.join('',''));
        }
        preFn();
    }

    reject(){
        let rejectFn = function(){
            return new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    reject();
                },2000);
            });
        }
        let asyncReject = async function(){
            try{
                await rejectFn();
            }catch( e) {
                console.log(''reject.....'');
            }
        }
        asyncReject();
    }

    output(log, time){
        return new Promise(resolve=>{
            setTimeout(()=>{
                var nowTime = new Date();
                resolve( nowTime.toTimeString() + ":" + log + "\r\n");
            }, time);
        });
    }
}

方法说明如下:

  • output:简单的输出方法,但返回了一Promise。
  • run: 使用await来等待两次对output的执行
  • runDiff:调用output时即创建promise。两个promise会同步执行
  • runAll:多任务同步执行和按步骤执行的实现方法。也就是forEach和for方法体中使用await的区别
  • premosFn: promise.all的使用。
  • reject: promise的reject会触发await的异常。

二、在c#中的实现

C#中异常是通过Task来实现的,所以标记了async的方法,其方法体中都可以出现await,否则不可以。以及Task中抛出的异常,如果没有同步等待,则不能获取异常

public class AsyncDemo
{
    private Task<string> Output(string val, int time)
    {
        return System.Threading.Tasks.Task.Run(() =>
        {
            System.Threading.Thread.Sleep(time * 1000);
            return (DateTime.Now.ToLongTimeString()) + ": " + val + "\r\n";
        });
    }

    public async System.Threading.Tasks.Task Run()
    {
        string oneVal = await Output("One", 2);
        string twoVal = await Output("Two", 2);
        System.Console.WriteLine("Run \r\n" + oneVal + " " + twoVal);
    }

    public async System.Threading.Tasks.Task RunDiff()
    {
        Task<string> oneTask = Output("one", 2);
        Task<string> twoTask = Output("two", 2);
        string val = await oneTask + await twoTask; 
        System.Console.WriteLine("RunDiff \r\n" + val);

    }

    public async System.Threading.Tasks.Task RunAll()
    {
        System.Console.WriteLine("b:" + (DateTime.Now.ToLongTimeString()));

        string[] array = new string[3] { "a", "b", "c" };
        foreach(var item in array)
        {
            string v = await Output(item, 2);
            System.Console.WriteLine(v);
        }
    }

    public async System.Threading.Tasks.Task PromiseFn()
    {
        System.Console.WriteLine("b:" + (DateTime.Now.ToLongTimeString()));

        string[] array = new string[3] { "a", "b", "c" };
        List<System.Threading.Tasks.Task<string>> tasks = new List<System.Threading.Tasks.Task<string>>();
        foreach (var item in array)
        {
            tasks.Add(Output(item, 2));
        }
        //waitAll返回值不能获取,他返回为void,而WhenAll则返回为一个Task(这个Task就有其列表值)
        string[] r = await System.Threading.Tasks.Task.WhenAll(tasks.ToArray());
        System.Console.WriteLine(string.Join(",",r));
    }

    public async System.Threading.Tasks.Task Reject()
    {
        Func<System.Threading.Tasks.Task> func = async () =>
        {
            throw new Exception("custom...");
            await Output("reject", 2);
        };
        await func();
    }
}

调用代码如下:

AsyncDemo asyncDemo = new AsyncDemo();
asyncDemo.Run().Wait();
asyncDemo.RunDiff().Wait();
asyncDemo.RunAll().Wait();
asyncDemo.PromiseFn().Wait();
try
{
    asyncDemo.Reject().Wait();
}catch(Exception e)
{
    System.Console.WriteLine("reject ex");
}

    上述代码就是Js的async和await在c#中的翻版实现。 其中每个异步方法的调用,都用到了Wait方法来进行同步等待。以获取到结果。而没有像Js中那么难以控制。尤其注意,async方法中异常的捕获。

三、两者的异同点

  • js中的async方法的调用,是没有wait方法来等待结果的执行的,只能通过promise来监听执行结果
  • c#中的async方法,由于推荐返回Task或者Task<T>,所以可以用Wait来等待执行结果,如果async方法返回为void,则与js类似。 C#中的下面示例方法的调用者捕获不了异常:
    public async void Run()
    {
        string oneVal = await Output("One", 2);
        string twoVal = await Output("Two", 2);
        System.Console.WriteLine("Run" + oneVal + " " + twoVal);
    }
  • c#中的Task可以异步方法的链式调用,即可将前一任务的执行结果作为第二任务的参数传入,当然js的Promise也完全是可以很轻松的实现:
System.Console.WriteLine("b:" + (DateTime.Now.ToLongTimeString()));

string[] array = new string[3] { "a", "b", "c" };

var r = await this.Output(array.First(), 2).ContinueWith((tsc) =>
{
    string v = tsc.GetAwaiter().GetResult();
    return this.Output(v + "02", 2);
});
System.Console.WriteLine(r.Result);

ES6 --- JS异步编程的几种解决方法及其优缺点

ES6 --- JS异步编程的几种解决方法及其优缺点

导言:

我们都知道 JS 是单线程的,这也正是异步编程对于 JS  很重要的原因,因为它无法忍受耗时太长的操作。正因如此有一系列的实现异步的方法。

方法一  setTimeout

常用于:定时器,动画效果

用法:setTimeout(func|code,delay)

缺点:

setTimeout 的主要问题在于,它并非那么精确。譬如通过 setTimeout() 设定一个任务在 10 毫秒后执行,但是在 9 毫秒之后,有一个任务占用了 5 毫秒的 CPU 时间片,再次轮到定时器执行时,时间就已经过期 4 毫秒

方法二 事件监听

任务的执行不取决于代码的顺序,而取决于某个事件是否发生

用法:f1.on(''done'',f2);

优点:比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以"去耦合",有利于实现模块化;

缺点:整个程序都要变成事件驱动型,运行流程会变得很不清晰;

方法三 回调函数

什么是回调函数?

JavaScript语言对异步编程的实现,就是回调函数。所谓回调函数,就是把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数;

误区:

回调函数是实现 JS 异步的一种方法,并不是说回调函数就是异步的。

只是我们用的大多数回调函数都是用于异步

异步的定义:

在javascript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。

回调函数的缺点:(想想,如果再嵌套多几层,代码会变得难以理解,俗称"回调函数噩梦(callback hell)");

回调函数本身并没有问题,它的问题出现在多个回调函数嵌套。

假定读取A文件之后,从A文件中获取B文件名,再读取B文件,

方法四 Promise对象

Promise原本只是社区提出的一个构想,一些外部函数库率先实现了这个功能。ES6将其写入语言标准,因此目前 JavaScript 语言原生支持 Promise 对象,假设要依次读取多个文件,如果用普通的回调函数,就会出现多重嵌套。代码不是纵向发展,而是横向发展;

Promise的优缺点:

优点:Promise 的写法是回调函数的改进,使用then方法以后,异步任务的两段执行看得更清楚了。then将原来异步函数的嵌套关系转变为链式步骤;

缺点:Promise 的最大问题是代码冗余,原来的任务被Promise包装了一下,不管什么操作,一眼看去都是一堆 then,原来的语义变得很不清楚;

所以,ES6在把 Promise 纳入标准的同时,也提供了另一种实现 => Generator 函数

 

 

今天的关于Rxjs异步编程的学习异步编程 js的分享已经结束,谢谢您的关注,如果想了解更多关于angular之Rxjs异步数据流编程入门、angular使用 rxjs异步方法、async 和 await 之异步编程的学习、ES6 --- JS异步编程的几种解决方法及其优缺点的相关知识,请在本站进行查询。

本文标签: