0 
const s1$ = of(Math.random())
const s2$ = ajax.getJSON(`https://api.github.com/users?per_page=5`)
const s3$ = from(fetch(`https://api.github.com/users?per_page=5`))
const click$ = fromEvent(document, 'click')
click$.pipe(
    switchMap(() => s1$)
).subscribe(e => {
    console.log(e)
})

我对上面的代码感到困惑，无法正确推理它们。在第一种情况下（s1$），每次都收到相同的结果，尽管我不明白为什么switchMap每次都不开始一个新的流，但对我来说看起来很好。好的，没关系

真正连线的事情发生在你跑步时s2$，s3$看起来相当，对吧？错误的！！！如果您尝试一下，行为会完全不同！

结果s3$以某种方式被缓存，即如果您打开网络面板，您将看到 http 请求仅发送一次。相比之下，http请求每次发送s2$

我的问题是我不能直接使用ajaxfrom之类的东西，rx因为 http 请求隐藏在第三方库中，我能想出的解决方案是使用内联流，即每次都创建新流

click$.pipe(
    switchMap(() => from(fetch(`https://api.github.com/users?per_page=5`)))
).subscribe(e => {
    console.log(e)
})

那么，我该如何解释这种行为以及处理这种情况的正确方法是什么？

4

1 回答 1

2

一个问题是您在设置测试用例时Math.random实际执行。fetch

// calling Math.random() => using the return value
const s1$ = of(Math.random())

// calling fetch => using the return value (a promise)
const s3$ = from(fetch(`https://api.github.com/users?per_page=5`))

另一个是fetch返回一个承诺，它只解决一次。from(<promise>)然后不需要重新执行 ajax 调用，它会简单地发出解析的值。

而ajax.getJSON返回每次重新执行的流。

如果你用你包装测试流，defer你会得到更直观的行为。

const { of, defer, fromEvent } = rxjs;
const { ajax }                 = rxjs.ajax;
const { switchMap }            = rxjs.operators;

// defer Math.random()
const s1$ = defer(() => of(Math.random()));

// no defer needed here (already a stream)
const s2$ = ajax.getJSON('https://api.github.com/users?per_page=5');

// defer `fetch`, but `from` is not needed, as a promise is sufficient
const s3$ = defer(() => fetch('https://api.github.com/users?per_page=5'));

const t1$ = fromEvent(document.getElementById('s1'), 'click').pipe(switchMap(() => s1$));
const t2$ = fromEvent(document.getElementById('s2'), 'click').pipe(switchMap(() => s2$));
const t3$ = fromEvent(document.getElementById('s3'), 'click').pipe(switchMap(() => s3$));

t1$.subscribe(console.log);
t2$.subscribe(console.log);
t3$.subscribe(console.log);
<script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>

<button id="s1">test random</button>
<button id="s2">test ajax</button>
<button id="s3">test fetch</button>

于 2019-02-12T10:00:38.733 回答