本文将为您提供关于Rxjs异步编程的学习的详细介绍,我们还将为您解释异步编程js的相关知识,同时,我们还将为您提供关于angular之Rxjs异步数据流编程入门、angular使用rxjs异步方法、a
本文将为您提供关于Rxjs异步编程的学习的详细介绍,我们还将为您解释异步编程 js的相关知识,同时,我们还将为您提供关于angular之Rxjs异步数据流编程入门、angular使用 rxjs异步方法、async 和 await 之异步编程的学习、ES6 --- JS异步编程的几种解决方法及其优缺点的实用信息。
本文目录一览:- Rxjs异步编程的学习(异步编程 js)
- angular之Rxjs异步数据流编程入门
- angular使用 rxjs异步方法
- async 和 await 之异步编程的学习
- ES6 --- 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异步数据流编程入门
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异步方法
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表示等待一个异步任务的执行。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异步编程的几种解决方法及其优缺点
导言:
我们都知道 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异步编程的几种解决方法及其优缺点的相关知识,请在本站进行查询。
本文标签: