Angular 从、管道和映射可观察到的逻辑

发布于02月02日

我正在努力更好地理解概念或RxJS，这里有一个简单的例子，我不确定我是否理解正确:

from([1,2,3,]).pipe(
map((data)=>{
    console.log(data,'map');
    return data
  })
)
.subscribe(data=>console.log(data, 'from subscribe'))
/*
1 map
1 from subscribe
2 map
2 from subscribe
3 map
3 from subscribe
*/

以下是我认为会发生的事情:

当我们调用subscribe时，前map订阅from Observable.
from发出的每个值都被控制台记录下来，并作为单独的观察值从map发出.因此，在这种情况下，我们将有3个观察点.
.subscribe订阅map中的每个可观测对象(解析为1的可观测对象，解析为2的另一个可观测对象，...)，我们看到另一个原木.

在看了文档之后，我认为我目前对事物如何工作的理解有些错误.

如果有人能证实或纠正我在问题中描述的逻辑，我将不胜感激.

推荐答案

from->；将数组转换为逐个emits 的可观测对象流.
map->；访问可观测的值，如果需要，您可以 Select 转换数据，输入参数不是可观测的，输出值也不是可观测的.
subscribe->；对于每个发出的值，调用订阅下一个块(传递的函数.

Subscribe有三个部分，subscribe有三个参数.

next-当可观察对象发出一个值时调用，将继续在每次发出时调用，直到可观察对象完成
error-当可观察到的流上有错误时调用，可能是非故意的(编码错误)或手动错误throw new Error('failed')
complete->；将在可观察的流完成后被调用.

在您的示例中，下一个块被调用三次(在您的例子中是console.log)，之后最后调用完整的块.为了更好地理解它，这里有一个突出显示它的工作示例！

import './style.css';

import { rx, of, map, from } from 'rxjs';

from([1, 2, 3])
  .pipe(
    map((data) => {
      console.log(data, 'map');
      return data;
    })
  )
  .subscribe({
    next: (data: any) => {
      console.log(data, 'from subscribe next');
    },
    error: (data: any) => {
      console.log(data, 'from subscribe error');
    },
    complete: () => {
      console.log('from subscribe complete');
    },
  });

stackblitz个