javascript - 如何使用 rx.js 发送多个 http 请求？

Question

我正在试用 rx.js 并尝试发出多个 http 请求。这是我为发出 http 请求而设置的 observable。

function httpGet(url) {
    return Observable.create(function forEach(observer) {
        var cancelled = false;
        axios.get(url).then(function(res) {
            if(!cancelled) {
                observer.onNext(res);
                observer.onCompleted();             
            }
        });

        return function dispose() {
            cancelled = true;
        }
    })
}

我正在尝试发出多个 http 请求，但我的结果是更多的 Observable。这是订阅:

var array = ['http://localhost:4444/text/88', 'http://localhost:4444/other/77'];

var source = Rx.Observable.fromArray(array).map(httpGet);

var subscription = source.subscribe(
    function (x) {
        console.log(x);
    },
    function (err) {
        console.log('Error: ' + err);
    },
    function () {
        console.log('Completed');
});

这是我的结果。

AnonymousObservable { source: undefined, __subscribe: [Function: forEach] }
AnonymousObservable { source: undefined, __subscribe: [Function: forEach] }
Completed

我知道我得到了 Observable，如果我 forEach 通过它们，那么我会得到结果，但我错过了正确的转换方式这变成了 data 而不是 Observable。我做错了什么？

Answer 1

这应该可以解决问题:

var array = ['http://localhost:4444/text/88', 'http://localhost:4444/other/77'];

var source = Rx.Observable.fromArray(array).concatMap(httpGet);

function httpGet(url) {
  return axios.get(url);
  }
var subscription = source.subscribe(
    function (x) {
        console.log(x);
    },
    function (err) {
        console.log('Error: ' + err);
    },
    function () {
        console.log('Completed');
});

一些解释:

• 可观察值是一系列值。观察者是处理这些值的三管齐下的对象。
• 您想要的是将数组(源)转换为 html 序列(通过获取 url 获得)。您可以使用的是:
  • 一组用于从外部源创建可观察对象的函数:cf. https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/categories.md ，部分 将事件或异步模式转换为可观察序列，或在数组和可观察序列之间。
  • 一组运算符，允许将这些源序列放入您制作的序列中(与上述链接相同)。
• 然后您想要订阅生成的序列并对它们做一些事情。那就是定义观察者的 subscribe 函数。
• 因此，在这里您使用数组值序列，使用 map 运算符生成一系列 promise，但实际上您将使用 concatMap 运算符输出已解决的 promise值的顺序与数组值相同。 concatMap 可以将一个可观察对象、一个数组/可迭代对象或一个 promise 作为其参数，并将在它返回的可观察对象中输出包装到这些对象中的值序列。因此，您没有一系列 promise ，而是拥有一系列由 promise 解决的值，即您获取的 html 内容。如果您对保持源的初始顺序不感兴趣，您还可以使用 flatMap 运算符。比照。 https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/concatmap.md和 https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/selectmany.md
• 然后您订阅它，并处理这些值

所以这基本上是一般过程，您获取一个源序列，通过明智地选择运算符将其转换为您选择的序列，然后用您的观察者函数一个一个地处理这些值。 另外，请注意，promise 类似于 observable，一些(大多数？)Rxjs 运算符会这样对待它们，因此您通常不必使用 then 来得到解决的值(value)。

最后，Rx.Observable.fromArray 似乎已被弃用，取而代之的是 Rx.Observable.from:cf。 https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/fromarray.md