详解 RxJS 创建型可观察对象操作符

一、简介

RxJS 中能够运用构造函数创立可调查目标，但是这种方式显着的便是效率不高。于是 RxJS 针对不同的业务场景，完成了不同的可调查目标的创立操作符。

二、HTTP 恳求

ajax

import { ajax } from 'rxjs/ajax';
const ob$ = ajax('your_url').subscribe({})
const ob$ = ajax.getJSON('your_url').subscribe({})
const ob$ = ajax({
    url: 'your_url',
    method: 'POST',
    headers: {
        // your headers
    },
    body: {
        // your body
    }
}).subscribe({})

ajax 大致与 jQuery 年代的 ajax 运用根本共同，仅仅此处的 ajax 返回的是一个可调查目标。能够订阅这些可调查目标，获取到可调查目标的返回值。当然你能够在可调查目标的 pipe 中处理 ajax 的返回值，然后给订阅目标。

三、回调函数

• bindCallback
• bindNodeCallback

bindCallback

绑定回调函数，回调函数一般放在函数参数的最后位置，一个简略的示例：

import { bindCallback } from 'rxjs';
const fnCb = (a,b, cb) => {
    cb(a, b, {p: 1})
}
const boundFnCb = bindCallback(fnCb);
boundFnCb('3', 'c').subscribe({
    next(v) {console.log(v)} // [ '3', 'c', { p: 1 } ]
})

自动履行 callback， 而且组合参数到数组中。

bindNodeCallback

绑定 node.js 中的回调函数，以 fs 为例，运用读取文件为例：

import { bindNodeCallback } from 'rxjs'
import * as fs from 'fs'
const readFile = bindNodeCallback(fs.readFile)
readFile('./groupBy.js', 'utf-8').subscribe({
  next(v) {
    console.log(v) // 具体的文件的内容
  }
})

四、时间

defer

推迟创立可调查目标，具有了懒的特性，只有在订阅了才创立。

import { defer, of } from 'rxjs'
const d$ = defer(() => of(1,2,3))
d$.subscribe({
    next(v) {console.log(v)}
})

of 操作符是一个创立型的操作符，直接运用 of 操作符，通过 defer 包裹之后，它就不会直接创立。当咱们订阅之后，这个可调查目标才会被创立。

timer

timer 能够承受三个参数作为参数：

• dueTime: (number/Date) 等待时间
• intervalOrScheduler： 定时器或i这调度器
• scheduler： 可选的调度器

import { timer, interval， of } from 'rxjs';
timer(1000)
  .pipe(concatMap(() => of(1, 2, 3)))
  .subscribe({
      next(v) {console.log(v)}
  });
timer(0, 1000).subscribe(n => console.log('timer', n));

interval

创立定时器可调查目标

interval(1000).subscribe(n => console.log('interval', n));

完成与 timer 传递第二个参数时能够等价完成。

五、数据规模

range 指定规模

运用 range 操作符创立一个规模：

import { range } from 'rxjs';
const numbers = range(1, 3);
numbers.subscribe({
  next: value => console.log(value),
  complete: () => console.log('Complete!')
});

此刻与效果 of(1,2,3) 类似。

generate

range 是指定数字规模，generate 能够根据条件生成，履行不同的条件生成不同的数据。generate 能够承受的参数比较多，所以比 range 要更加灵活的生成数据。

• init： 指定初始状态
• condition: 停止生成条件
• iterate： 迭代步长函数
• resultSelector： 结果选择器
• scheduler： 调度器

import { generate } from "rxjs";
const initialState = 0;
const condition = (x) => x < 10;
const iterate = (x) => x + 1;
const resultSelector = (x) => x;
const result = generate({ initialState, condition, iterate, resultSelector });
result.subscribe((x) => console.log(x));

因为 generate 一些写法现已被抛弃，这儿引荐运用目标的办法进行处理。

六、空值

empty 函数现已被抛弃，运用 EMPTY 常量来代替，订阅时不会触发 next 办法，直接完成。

import { EMPTY } from 'rxjs';
EMPTY.subscribe({
  complete: () => console.log('Complete!')
});

因为不会触发 next 办法，这儿就不写了，直接调用 complete。

七、过错处理

throwError 抛出过错可调查目标。参数是一个函数(引荐运用函数)：

import { throwError } from 'rxjs'
throwError(() => new Error('my error')).subscribe({
  error(e) {console.log(e)}
})

当然 throwError 是处理过错的创立型函数，在 RxJS 也能够直接抛出一个 JavaScript 过错 new Error()。

八、js 根底类型值（静态值）

of

import { of } from 'rxjs';
// 情况
of(10, 20, 30).subscribe({next(v) { console.log(v) }) // 发出 10 发出 20 发出 30
of([10, 20, 30]).subscribe({next(v) { console.log(v) }) // 发出 [10 20 30]

of 特点是能够承受多个参数，每一个参数独自发射。of 操作符值配合静态数据十分合适。

from

from 与 of 不同的，from 承受一个迭代器 iterator 作为参数。当然数组是能够迭代的，下面以数组为例：

import { from } from 'rxjs';
const array = [10, 20, 30];
const result = from(array);

from 解释一个迭代器参数，发射数据的时候，迭代数据发射。

九、事情（dom）

当然 RxJS 在处理 dom 事情时，也很便利，fromEvent 传递 dom 即可获取当时的 dom 的可调查目标。

fromEvent

import { fromEvent } from 'rxjs';
const clicks = fromEvent(document, 'click');
clicks.subscribe(x => console.log(x));

fromEvent 指定 dom 和 dom 对应的事情作为可调查目标。

值得注意的是：fromEvent 是一个热可调查目标。事情有多个监听器，所有 fromEvent 算是热可调查目标，具有多播的特性。

fromEventPattern

fromEventPattern 是 fromEvent 底层版本，需求两个参数，一个是订阅、一个是移除订阅。

import { fromEventPattern } from 'rxjs';
function addClickHandler(handler) {
  // 订阅
}
function removeClickHandler(handler) {
  // 移除订阅
}
const clicks = fromEventPattern(
  addClickHandler,
  removeClickHandler
);
clicks.subscribe(x => console.log(x));

显着 fromEventPattern 关于订阅有更多的操作性，如果是简略的 dom 操作运用 fromEvent 即可。

十、条件

iif

iif 是一个条件创立可调查目标。承受三个参数作为参数：

• 第一个是一个函数，返回一个布尔值
• 第二个参数：可调查目标
• 第三个参数：可调查目标

import { iif, of } from 'rxjs';
let cond;
const who$ = iif(
  () => cond,
  of('first'),
  of('second')
);
cond = false // 指定第一个参数的返回值
who$.subscribe({
    next(v) {console.log(v)}
})

十一、小结

本文将创立型操作符大致分为 9 块内容，都是一些十分常见的 JS 适用场景，包括 dom 事情、ajax 恳求、数据、条件判断、回调函数、过错等。这些操作符式为了便利在业务场景运用时快速的创立可调查目标。如果要娴熟通晓 RxJS 这些操作符的娴熟程度要十分高。