使用RxJS将几个ajax请求转换为Observable [英] Turn several ajax requests into Observables with RxJS

问题描述

我正在努力争取某些东西 - 我猜这意味着我误解了并且做了些傻事

I'm struggling with something - which I'm guessing means I've misunderstood and am doing something silly

我有一个可观察的，需要用它来创建一些对象，将其发送到服务器进行处理，将服务器的结果与我发送的对象组合，然后将其转换为可观察对象，这样我想做的事（我认为）就像是

I have an observable and need to use it to create some object, send that to the server for processing, combine a result from the server with the object I sent, and then turn that into an observable so what I want to do (I think) is something like

var theNewObservable = my.observable.things.select(function(thing) {
            var dataToSend = generateMyJavascriptObjectFrom(thing);
            var promise = $.ajax({
                type: 'POST',
                url: http://somewhere.com,
                data: dataToSend
            }).promise();

            return rx.Observable.fromPromise(promise).subscribe(function(data, status, jqXHR) {
                var infoFromServer = jqXHR.getResponseHeader('custom-header-returned');
                    // I'm wanting this to be the thing other code can subscribe to
                return { infoFromServer: dataToSend };
            }, function(err) {
                alert('PC LOAD LETTER!');
                console.error(err);
            });
        }
});

theNewObservable.subscribe(function(combinedInfo) { console.log(combinedInfo) };

我期待 {infoFromServer：dataToSend} 我得到一个 AutoDetachObserver 我可以看到它有一个带有ajax onSuccess签名的onNext，所以我显然做了一些愚蠢的事情

where I'm expecting {infoFromServer: dataToSend} I'm getting an AutoDetachObserver and I can see that has an onNext with the ajax onSuccess signature so I'm obviously doing something silly

推荐答案

一些应该有所帮助的事情：

A couple things that should help a bit:

1） subscribe 方法是一种终端方法，因为它不会返回任何内容。这是 Observer 附加的地方，因此在 subscribe

1) The subscribe method is a terminal method, as in, it won't return anything. It is where the Observer attaches so there should be no further data propagation after the subscribe

2）订阅的 onNext 方法只能取一个值需要包含所有的消息数据。

2) The onNext method of subscribe can only take a single value which you will need to have all the message data wrapped in.

由于jQuery的 Promise 对此行为不会很好，你有两种选择。首先，您可以使用 RX-DOM 项目获取 Observable ajax版本。或者你需要包装promise方法。如果您还需要等待响应，则应使用 selectMany ，这将允许您触发承诺，然后等待其返回并将响应映射到原始请求。

Since jQuery's Promise will not behave well with this, you have two options. First, you can use the RX-DOM project for an Observable ajax version. Or you will need to wrap the promise method. If you further need to wait on the response you should be using selectMany instead, which will allow you to fire off the promise, then await its return and map the response to the original request.

var theNewObservable = my.observable.things
          //Preprocess this so that `selectMany` will use 
          //dataToSend as the request object
          .map(function(thing) { return generateMyJavascriptObjectFrom(thing); })
          .selectMany(function(dataToSend) {
            var promise = $.ajax({
                type: 'POST',
                url: http://somewhere.com,
                data: dataToSend
            }).promise();

            //Rewrap this into a promise that RxJS can handle
            return promise.then(function(data, status, jqXHR) {
              return {data : data, status : status, jqXHR : jqXHR};
            });
          }, function(request, response) {
            return {
                    infoFromServer : response.jqXHR.getResponse('custom-header'),
                    dataToSend : request
                   };
          });

theNewObservable.subscribe(
  function(combinedInfo) { 
    console.log(combinedInfo) 
  },
  function(err) {
    alert('PC LOAD LETTER!');
    console.error(err);
  });

这篇关于使用RxJS将几个ajax请求转换为Observable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！