RxJS proporciona muchos operadores para operar y controlar el flujo de datos (Observable). En el artículo [RxJS en Angular] - Creación de flujos de datos, se presenta el método para crear flujos de datos y los operadores relevantes no se describirán aquí. Este artículo solo presenta los operadores de uso común para el procesamiento de datos en el flujo de datos y el flujo en su conjunto.
1. Operadores para transmisión de datos
operador de mapa
Use el operador de mapa para procesar los datos generados cada vez en el flujo de datos, map(val: funcion(val: R):R) , ejemplo de código:
import { from, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
let ob: Observable<number> = from([80, 90, 100]);
let fn = (num: number) => num * 2;
ob.pipe(map(fn)).subscribe(d => { console.log(d); });
// 输出：
// 160
// 180
// 200operador de grifo
Use el operador tap para escuchar cada valor emitido en el Observable de origen, realice un procesamiento adicional, pero devuelva el mismo Observable de origen. Ejemplo de código:
import { from, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
let ob: Observable<number> = from([1, 2, 3]);
ob.pipe(
tap(d => { console.log(`tap log ${d}`); })
).subscribe(d => { console.log(d); });
// 输出：
// tap log 1
// 1
// tap log 2
// 2
// tap log 3
// 3operador de escaneo
Use el operador de escaneo para contar la cantidad de veces que se generan los datos, escaneo (acumulador: función (acc: R): R, semilla: R) , ejemplo de código:
import { from, Observable } from 'rxjs';
import { scan } from 'rxjs/operators';
let ob: Observable<string> = from(["a", "b", "c"]);
ob.pipe(scan(d => d + 10, 15)).subscribe(d => {
console.log(d);
});
// 输出：
// 25
// 35
// 45operador throttleTime
Use el operador throttleTime para emitir un valor del flujo de datos de origen, luego ignore los valores de origen emitidos posteriormente durante un período de tiempo determinado y repita el proceso.
El diagrama de flujo correspondiente a throttleTime (duración: número) :
[RxJS en Angular]: el ejemplo en la descripción general de que se puede hacer clic en el botón de control como máximo una vez por segundo usa el operador throttleTime:
import { fromEvent } from 'rxjs';
import { scan, throttleTime } from 'rxjs/operators';
/**
* 绑定按钮点击事件
*/
bindBtn2CLick() {
const button = document.querySelector('#btn2') as HTMLElement;
fromEvent(button, 'click').pipe(
throttleTime(1000),
scan(count => count + 1, 0)
).subscribe(count => {
console.log(`按钮2点击了 ${count} 次`);
});
}operador auditTime
Use el operador auditTime para ignorar el valor de origen durante un período de tiempo determinado, luego emita el valor más reciente del Observable de origen y repita el proceso.
El diagrama de flujo correspondiente a auditTime (duración: número):
auditTime es como throttleTime, pero envía el último valor de la ventana de tiempo de silencio en lugar del primero. Siempre que el temporizador interno de auditoría esté deshabilitado, emite el valor más reciente del Observable de origen en el Observable de salida e ignora el valor de origen cuando el temporizador está habilitado. Inicialmente, el temporizador está deshabilitado. Tan pronto como se alcanza el primer valor, el temporizador se activa. Una vez que transcurre la duración, el intervalo se desactiva, el Observable de salida emite el último valor y el proceso se repite.
operador debounceTime
Use el operador debounceTime para emitir un valor desde el Observable de origen solo después de que haya transcurrido una cantidad de tiempo específica sin emitir otro valor de origen. El diagrama de flujo correspondiente:
Uno de los escenarios más utilizados del operador debounceTime es la asociación de entrada. El siguiente ejemplo demuestra la consulta de asociación de entrada después de detener la entrada durante 50 milisegundos:
const input = fromEvent(document.querySelector('input'), 'input');
input.pipe(
debounceTime(200),
map(event => event.target.value),
).subscribe(value => {
console.log(value);
});saltar operador
Usa el operador skip para saltar los primeros N valores (N = recuento) emitidos por el Observable fuente, y el diagrama de flujo correspondiente a skip(count: number) :
operador skipUntil
Use el operador skipUntil para omitir el valor emitido por el Observable fuente hasta que otro Observable emita un valor
El diagrama de flujo correspondiente a skipUntil(notifier: Observable) :
tomar operador
Use el operador de toma para emitir solo los valores N (N = recuento) emitidos originalmente por la fuente Observable.
El diagrama de flujo correspondiente a take(count: number) :
operador takeUntil
Usa el operador takeUntil para emitir valores emitidos por el Observable fuente hasta que otro Observable emita valores.
El diagrama de flujo correspondiente a takeUntil(notificador: Observable):
Los operadores más utilizados para la transmisión de datos incluyen: first() last(), etc., que no se enumerarán aquí. Puede consultar la documentación oficial para obtener información: Documentación oficial de RxJS. Cabe señalar que en el marco Angular para Todos los operadores de transmisión de datos están escritos en el método pipe(), que es ligeramente diferente de la sintaxis del sitio web oficial.
2. Procesamiento para el flujo general
operador postal
Se combinan múltiples Observables usando el operador zip para crear un Observable cuyos valores se calculan secuencialmente a partir de los valores de todos los Observables de entrada. Si el último argumento es una función, esta función se usa para calcular el valor final emitido, de lo contrario, se devuelve una matriz que contiene todos los valores de entrada en orden.
import { Observable, from, zip } from 'rxjs';
let obName: Observable<string> = from(["Lucy", "LiLei", "HanMeiMei"]);
let obScore: Observable<number> = from([80, 90, 100]);
zip(obName, obScore).subscribe(([name, score]) => {
console.log(`name: ${name}, score: ${score}.`)
});
// 输出：
// name: Lucy, score: 80.
// name: LiLei, score: 90.
// name: HanMeiMei, score: 100.El caso donde el último parámetro de zip es una función:
import { Observable, from, zip } from 'rxjs';
let obName: Observable<string> = from(["Lucy", "LiLei", "HanMeiMei"]);
let obScore: Observable<number> = from([80, 90, 100]);
let fn = (name: any, score: any) => {
return `name: ${name}, score: ${score}.`;
};
zip(obName, obScore, fn).subscribe((d) => { console.log(d); });
// 输出：
// name: Lucy, score: 80.
// name: LiLei, score: 90.
// name: HanMeiMei, score: 100.Al usar el operador zip, el flujo de datos total solo se activará para generar datos cuando cada flujo de datos tenga datos, como obScore = from([80, 90]); en el ejemplo anterior, solo habrá dos datos de salida, sólo se imprimirán las dos primeras líneas.
operador de fusión
Utilice el operador de combinación para combinar varios flujos de datos en un solo flujo de datos y luego enviarlos en secuencia:
import { timer, Observable, merge } from 'rxjs';
import { map } from 'rxjs/operators';
let obA: Observable<any> = timer(10000, 2000).pipe(map(d => `Observable A : ${d}`));
let obB: Observable<any> = timer(2000, 2000).pipe(map(d => `Observable B : ${d}`));
merge(obA, obB).subscribe(d => { console.log(d); });
// 延迟1秒后每间隔2秒输出
// Observable A : 0
// Observable B : 0
// Observable A : 1
// Observable B : 1
// ...operador de concatenación
El operador concat se puede usar para concatenar los datos de dos flujos de datos juntos como un solo flujo de datos y emitir los datos en orden concatenado:
import { timer, Observable, concat } from 'rxjs';
let obA: Observable<number> = from([1, 2, 3]);
let obB: Observable<number> = from([4, 5, 6]);
concat(obA, obB).subscribe(d => { console.log(d); });
// 输出
// 1
// 2
// 3
// 4
// 5
// 6Cuando se utiliza el operador concat, los datos del flujo de datos subsiguiente deben esperar hasta que se envíen los datos del flujo de datos anterior antes de que se puedan enviar:
import { timer, Observable, concat } from 'rxjs';
import { map } from 'rxjs/operators';
let obA: Observable<any> = timer(1000, 2000).pipe(map(d => `Observable A : ${d}`));
let obB: Observable<any> = timer(2000, 2000).pipe(map(d => `Observable B : ${d}`));
concat(obA, obB).subscribe(d => { console.log(d); });El código anterior solo imprimirá la información del Observable A, porque obA no se ha completado, por lo que no se pueden emitir los datos en obB.