RxJS：From 运算符

发表 admin at 2024年8月26日

类别

未分类

标签

处方从运算符用于将可迭代的数据转换为可观察对象。当您想要规范化在可观察序列中传递和共享的数据类型，或者当函数需要接收和处理可观察对象时，它非常有用。另一种用途是当您想要使用通常不适用于原始数据类型的 RxJS 运算符时。

可以使用from转换为可观察对象的可迭代类型的示例包括数组、映射、集合、承诺、DOM 节点和生成器函数。下面是其中一些类型的示例：

数组

最常见的是从运算符用于将数组转换为可观察对象：

let myArr = ['????', '????', '????', '????'];

Rx.Observable
  .from(myArr)
  .filter(x => x !== '????')
  .map(x => `Hello ${x}!`)
  .subscribe(console.log);

  // Hello ????!
  // Hello ????!
  // Hello ????!

同步与异步

默认情况下，from操作符返回一个同步可观察对象：

let myArr = ['????', '????', '????'];

console.log('Before');
Rx.Observable
  .from(myArr)
  .map(x => `Hello ${x}!`)
  .subscribe(console.log);
console.log('After');

// Before
// Hello ????!
// Hello ????!
// Hello ????!
// After

但是，如果您愿意，可以使用异步调度程序使其异步：

let myArr = ['????', '????', '????'];

console.log('Before');
Rx.Observable
  .from(myArr, Rx.Scheduler.async)
  .map(x => `Hello ${x}!`)
  .subscribe(console.log);
console.log('After');

// Before
// After
// Hello ????!
// Hello ????!
// Hello ????!

生成器函数

生成器函数是可迭代类型，因此也可以使用以下方法将它们转换为可观察对象：从运算符。下面是一个简单的示例：

function* generateUnique() {
  let num = 0;
  while (true) {
    yield num++;
  }
}

Rx.Observable.from(generateUnique())
  .take(3)
  .subscribe(console.log);

  // 0
  // 1
  // 2

在这里我们使用拿运算符在指定数量的值之后完成可观察对象。否则，我们将创建一个无限的可观察对象，并在订阅时导致页面崩溃。

下面是一个稍微复杂一点的例子，也使用了拉链运算符来组合多个可观察的值：

function* generateName() {
  yield 'Cat';
  yield 'Dog';
  yield 'Bird';
  return;
}

function* generateEmoji() {
  yield '????';
  yield '????';
  yield '????';
  return;
}

function* generateSound() {
  yield 'Meow';
  yield 'Woof';
  yield 'Tweet';
  return;
}

const names = Rx.Observable.from(generateName());
const emojis = Rx.Observable.from(generateEmoji());
const sounds = Rx.Observable.from(generateSound());

const combined = Rx.Observable.zip(names, emojis, sounds, (name, emoji, sound) => {
  return `The ${name} ${emoji} goes ${sound.toUpperCase()}`;
})
.subscribe(console.log);

// The Cat ???? goes MEOW
// The Dog ???? goes WOOF
// The Bird ???? goes TWEET

请注意产卵操作符也用于组合生成器和可观察对象，但该操作符目前在 RxJS 5+ 中不可用

承诺

Promise 也可以轻松地转换为可观察对象，它们将是异步的并且包装已解决或已拒绝的值：

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello');
  }, 2000);
});

Rx.Observable
  .from(myPromise)
  .subscribe(x => console.log(x, ' World!'));

// Hello World! (after 2 seconds)

DOM 节点

这是一个简单的例子，其中 3 个 DOM 节点的集合被转换成一个可观察对象，并被映射到仅提取文本内容：

<h2>Hey,</h2>
<h2>Hello</h2>
<h2>Alligator!</h2>


<script>
  const h2s = document.querySelectorAll('h2');

  Rx.Observable.from(h2s)
    .map(h2 => h2.textContent)
    .subscribe(console.log);

    // Hey,
    // Hello
    // Alligator!
</script>

关于字符串

字符串可以进行迭代，因此可以使用from运算符，但字符串中的每个字符都将是一个单独的值：

Rx.Observable
  .from('Hi!')
  .subscribe(console.log);

  // H
  // i
  // !

相反，要将字符串转换为单个值，您需要使用的操作员：

Rx.Observable
  .of('Hi!')
  .subscribe(console.log);

  // Hi!