Angular 2 : Chain http requests with concat()-6ren

Angular 2 : Chain http requests with concat()

转载作者：行者123 更新时间：2023-12-02 13:28:25

我在链接多个 HTTP 请求时遇到一些困难。

首先，在返回冷 Observable 的服务方法中定义请求。

FormPartService

submitFormPart(id: string, part: string, data: any) {

    let body = JSON.stringify({
        claimFileId: claimFileId,
        part: part,
        data: data
    });

    return this.http.post('/form-part', body)
                    .map( (res) => { 
                            let body = res.json();
                            if (body.data){
                                return body.data;
                            }
                        } 
                    );
}

我要提交的表单部分的数量可变，具体取决于它们是否脏，因此我迭代填充这些表单的数组。每个调用都不依赖于前一个调用的返回，我最终需要的只是最后一个调用之后返回的内容

为此，我尝试了 concat() 运算符，在我看来，它比 switchMap() 更适合我的情况。这是我的尝试:

组件

var formToSubmit = [...]; // Contains dirty forms that be sent to the backend
var id = '123';
var stream$; // Will contain the first Observable

formToSubmit.forEach((form, index) => {
    if (index === 0) {
        // Set stream$ with the first Observable
        stream$ = this.formPartService.submitFormPart(id, form.getPartName(), form.getValues())
    }
    else {
        // Concat the first Observable with the others
        let obs$ = this.formPartService.submitFormPart(id, form.getPartName(), form.getValues());
        stream$.concat( obs$ );
    }
});

stream$.subscribe((globalForm) => {
    console.log(globalForm);
})

不幸的是，它不起作用。当我一步步调试时，一切都很顺利，我用观察者设置了 stream$ ， stream$.concat() 不会中断。但是我在网络中得到的只是只有第一个请求，而不是链接的请求。

我做错了什么？非常感谢

编辑我用 Kwintep 提供的示例替换了我的代码，以优化请求链。不幸的是，这些请求都被很好地一一执行，但是一旦完成，我就会收到以下错误 unknown type returned :

core.umd.js?e2a5:3462 EXCEPTION: unknown type returnedErrorHandler.handleError @ core.umd.js?e2a5:3462next @ core.umd.js?e2a5:6924schedulerFn @ core.umd.js?e2a5:6172SafeSubscriber.__tryOrUnsub @ VM1077851:223SafeSubscriber.next @ VM1077851:172Subscriber._next @ VM1077851:125Subscriber.next @ VM1077851:89Subject.next @ VM1077847:55EventEmitter.emit @ core.umd.js?e2a5:6164onError @ core.umd.js?e2a5:6388onHandleError @ core.umd.js?e2a5:6263ZoneDelegate.handleError @ zone.js?fad3:207Zone.runTask @ zone.js?fad3:139ZoneTask.invoke @ zone.js?fad3:304
core.umd.js?e2a5:3467 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js?e2a5:3467next @ core.umd.js?e2a5:6924schedulerFn @ core.umd.js?e2a5:6172SafeSubscriber.__tryOrUnsub @ VM1077851:223SafeSubscriber.next @ VM1077851:172Subscriber._next @ VM1077851:125Subscriber.next @ VM1077851:89Subject.next @ VM1077847:55EventEmitter.emit @ core.umd.js?e2a5:6164onError @ core.umd.js?e2a5:6388onHandleError @ core.umd.js?e2a5:6263ZoneDelegate.handleError @ zone.js?fad3:207Zone.runTask @ zone.js?fad3:139ZoneTask.invoke @ zone.js?fad3:304
core.umd.js?e2a5:3468 TypeError: unknown type returned
    at Object.subscribeToResult (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:297:2), <anonymous>:69:27)
    at CombineLatestSubscriber._complete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:797:2), <anonymous>:108:46)
    at CombineLatestSubscriber.Subscriber.complete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:114:18)
    at MergeMapSubscriber.notifyComplete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:155:30)
    at InnerSubscriber._complete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:315:2), <anonymous>:30:21)
    at InnerSubscriber.Subscriber.complete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:114:18)
    at MapSubscriber.Subscriber._complete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:132:26)
    at MapSubscriber.Subscriber.complete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:114:18)
    at XMLHttpRequest.onLoad (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:261:2), <anonymous>:1499:42)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:236:37)
    at Object.onInvokeTask (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:6233:41)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:235:42)
    at Zone.runTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:136:47)
    at XMLHttpRequest.ZoneTask.invoke (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:304:33)
  -------------   Elapsed: 336 ms; At: Mon Nov 14 2016 13:58:04 GMT+0100 (Paris, Madrid)   -------------  
    at Object.onScheduleTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2666:2), <anonymous>:76:18)
    at ZoneDelegate.scheduleTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:213:49)
    at Zone.scheduleEventTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:156:39)
    at zoneAwareAddListener (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:773:14)
    at XMLHttpRequest.addEventListener (eval at createNamedFn (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2)), <anonymous>:3:43)
    at Observable.eval [as _subscribe] (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:261:2), <anonymous>:1540:22)
    at Observable.subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:56:27)
    at Observable._subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:114:28)
    at MapOperator.call (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:273:2), <anonymous>:54:23)
    at Observable.subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:53:22)
    at Object.subscribeToResult (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:297:2), <anonymous>:21:27)
    at MergeMapSubscriber._innerSub (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:120:38)
    at MergeMapSubscriber._tryNext (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:117:14)
    at MergeMapSubscriber._next (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:100:18)
    at MergeMapSubscriber.notifyComplete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:152:18)
    at InnerSubscriber._complete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:315:2), <anonymous>:30:21)
    at InnerSubscriber.Subscriber.complete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:114:18)
    at MapSubscriber.Subscriber._complete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:132:26)
    at MapSubscriber.Subscriber.complete (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:114:18)
    at XMLHttpRequest.onLoad (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:261:2), <anonymous>:1499:42)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:236:37)
    at Object.onInvokeTask (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:6233:41)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:235:42)
    at Zone.runTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:136:47)
    at XMLHttpRequest.ZoneTask.invoke (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:304:33)
  -------------   Elapsed: 861 ms; At: Mon Nov 14 2016 13:58:03 GMT+0100 (Paris, Madrid)   -------------  
    at Object.onScheduleTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2666:2), <anonymous>:76:18)
    at ZoneDelegate.scheduleTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:213:49)
    at Zone.scheduleEventTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:156:39)
    at zoneAwareAddListener (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:773:14)
    at XMLHttpRequest.addEventListener (eval at createNamedFn (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2)), <anonymous>:3:43)
    at Observable.eval [as _subscribe] (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:261:2), <anonymous>:1540:22)
    at Observable.subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:56:27)
    at Observable._subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:114:28)
    at MapOperator.call (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:273:2), <anonymous>:54:23)
    at Observable.subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:53:22)
    at Object.subscribeToResult (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:297:2), <anonymous>:21:27)
    at MergeMapSubscriber._innerSub (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:120:38)
    at MergeMapSubscriber._tryNext (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:117:14)
    at MergeMapSubscriber._next (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:100:18)
    at MergeMapSubscriber.Subscriber.next (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:89:18)
    at ArrayObservable._subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:370:2), <anonymous>:114:28)
    at ArrayObservable.Observable.subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:56:27)
    at Observable._subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:114:28)
    at MergeMapOperator.call (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:75:23)
    at Observable.subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:53:22)
    at Observable._subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:114:28)
    at CombineLatestOperator.call (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:797:2), <anonymous>:74:23)
    at Observable.subscribe (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:53:22)
    at EditorComponent.submitAll (eval at <anonymous> (http://192.168.33.10:7777/app.js:1220:2), <anonymous>:81:18)
    at _View_EditorComponent0._handle_click_52_0 (EditorComponent.ngfactory.js:602:28)
    at eval (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:9698:28)
    at eval (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:209:2), <anonymous>:1877:40)
    at eval (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:209:2), <anonymous>:1990:115)
    at ZoneDelegate.invoke (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:203:28)
    at Object.onInvoke (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:6242:41)
    at ZoneDelegate.invoke (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:202:34)
    at Zone.runGuarded (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:110:47)
    at NgZoneImpl.runInnerGuarded (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:6271:82)
    at NgZone.runGuarded (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:6504:77)
    at HTMLButtonElement.outsideHandler (eval at <anonymous> (http://192.168.33.10:7777/vendor.js:209:2), <anonymous>:1990:83)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:236:37)
    at Zone.runTask (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:136:47)
    at HTMLButtonElement.ZoneTask.invoke (eval at <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:304:33)ErrorHandler.handleError @ core.umd.js?e2a5:3468next @ core.umd.js?e2a5:6924schedulerFn @ core.umd.js?e2a5:6172SafeSubscriber.__tryOrUnsub @ VM1077851:223SafeSubscriber.next @ VM1077851:172Subscriber._next @ VM1077851:125Subscriber.next @ VM1077851:89Subject.next @ VM1077847:55EventEmitter.emit @ core.umd.js?e2a5:6164onError @ core.umd.js?e2a5:6388onHandleError @ core.umd.js?e2a5:6263ZoneDelegate.handleError @ zone.js?fad3:207Zone.runTask @ zone.js?fad3:139ZoneTask.invoke @ zone.js?fad3:304
VM1077851:227 Uncaught TypeError: unknown type returned(…)

最佳答案

您的代码可以优化为:

// Mocks an http call that takes 1 second to complete
function fakeRequest(id) {
  console.log('doing the request for id ' + id);
  return Rx.Observable.of(id).delay(1000);
}

let items = ["1", "2", "3"];

// create an observable from the array that emits every item one after one
Rx.Observable.from(items)
   // use concatMap, this operator accepts a function that returns an observable.
   // It will subscribe to this observable and not take on any next values
   // untill that observable completes.
   // So it will get '1' and perform the request. As soon as this one completes
   // it will handle the next value, which will be '2' and so on.
  .concatMap(
    (val) => {
      return fakeRequest(val)
   })
   // Use combine all to make sure the subscription below isn't call untill
   // every element in the original array is handled.
  .combineAll()
   // Get back an array with the results from every call, just take the last one
   // if you really need it
  .subscribe((val) => console.log(val));

内嵌评论。 Jsbin 示例如下:http://jsbin.com/hequvokaya/edit?js,console

关于 Angular 2 : Chain http requests with concat()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40533016/

文章推荐： file-io - Fortran 可以直接从二进制文件读取字节吗？

文章推荐： r - ggplot : combining size and color in legend

文章推荐： gruntjs - grunt 不会在 watch livereload 上重新加载服务器

python - 为什么 from `from itertools import chain` 有效但 `import itertools.chain as chain` 无效？
为什么下面的工作: from itertools import chain 但下面的不是吗？ import itertools.chain as chain 最佳答案 import foo.bar 语
ABAP辨析ONINPUT|REQUEST|CHAIN-INPUT|CHAIN-REQUEST
1、逻辑流在屏幕开发中，存在如下逻辑流： PBO（Process Before Output）：屏幕输出之前触发 PAI（Process After Input）：用户在屏幕中执
javascript - AngularJS $q : How to chain promises then do parallel last in the chain?
我正在尝试链接一系列任务，返回一个 promise ，在链的最后执行并行执行。下面的代码不起作用，我认为你可以传递任何在“then”内返回 promise 的对象。有没有适当的方法来实现这一点。谢谢。
python - itertools 的 chain.from_iterable 和 chain() 的更简化解释
您能否对 itertools 中的 chain() 和 chain.from_iterable 这两个方法给出更简单的解释？我搜索了知识库和 python 文档，但我很困惑。我是 python 新
C++ 链接成员函数使用 .chain().method() 与 ->chained(0->method()
问题的简短版本我就是否使用 ./*this 与 ->/this 寻求建议，即 C++ (*this).chained().methods() 与 this->chained()->methods()
python - chain(*iterable) 与 chain.from_iterable(iterable) 之间的区别
itertools 中所有有趣的迭代器让我着迷，但我的一个困惑是这两个函数之间的区别以及为什么存在 chain.from_iterable。 from itertools import chain d
swift - Swift 中 "optional chaining"和 "optional call chaining"之间的区别
Swift 中的“可选链接”和“可选调用链接”之间有语义差异吗？最佳答案我暂时会回答“否”，没有语义差异。 “Optional Chaining”在“Swift 编程语言(Swift 2 Prer
javax.net.ssl.SSLHandshakeException : null cert chain null cert chain
我有一个服务器和一个客户端。我让他们都在同一台机器上运行。我正在尝试在客户端和服务器之间建立 SSL 连接。我已经使用以下 keytool 命令为服务器和客户端生成了证书。对于客户keytool -
javascript - Angular Http 请求中的 Chain Map 或 Chain Filter 如何返回 promise
我有一些数据要从带有 lodash 的 json 数组中拒绝。我需要拒绝不需要的多个键值。我在想我可以链接映射并再次使用 reject 函数，或者可能为 reject 方法编写一个谓词函数以供使用。
amazon-web-services - 我正在学习创建 AWS Lambda。我想创建一个 "chain": S3 -> 4 Chained Lambda( )'s -> RDS. I can' t get the first lambda to call the second
我真的什么都试过了。令人惊讶的是，谷歌对此没有太多答案。当某个 .csv 文件上传到 S3 存储桶时，我想解析它并将数据放入 RDS 数据库。我的目标是学习 lambda serverless 技
chain - 以太坊和链有什么区别？
我最近一直在研究区 block 链，并偶然发现了以太坊和 chain.com 这两个平台似乎都有助于开发和部署区 block 链应用程序，其中 chain.com 专门针对金融公司。尽管如此，两者之
javascript - chained 然后调用错误回调执行多次
asyncFunction1 .then(asyncFunction2, errorHandlerFunction) .then(Function3, errorHandlerFunc
markov-chains - 使用马尔可夫链进行程序音乐生成
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
Rethinkdb:Chain getAll & between
我得到 RqlRuntimeError: Expected type TABLE_SLICE but found SELECTION: 链接 getAll 和 between 方法时出现错误。 r.d
jquery - "Chaining"到可拖动调用以启用触摸功能
我对 jquery ui 很陌生，但由于我的项目的性质，我有点陷入了困境!基本上我需要帮助的是，我有一个文件，该文件将某些自定义设置应用于 jquery ui 可拖动小部件，并且我想进一步自定义以启用
javascript - 'chain' JS函数在第一个完全完成后如何
我有一个函数应该一个接一个地运行，例如: function cutTomatoesAlone(Kg){ // slice my stuff } function cookTomatoes(Mi
android - Chain animator设置android动画
Android 新手，我想制作一些流畅的动画。我在设备上有一个包含效果的文件，每个效果都是一个动画。该文件告诉我何时播放效果以及效果持续时间。问题是我不能动态链接 animatorSet : An
java - 在Struts2的这种情况下如何避免 "chain"？
我有一个 Action，叫做 ShowData从数据库中恢复数据并将其放入 jsp。 struts.xml ... foo.jsp ... 在 foo.jsp 页面中，我有一个表单和我使用
javascript 三元运算符 "chaining"
我正在尝试使用三元运算符编写类似这样的东西(由于 jsx 语法限制而需要) if(!this.state.msg) { if(this.state.ask.length != 0) {
c# - chain linq查询的顺序执行
这段代码有区别吗？ var query = DbContext.Customers .Where() .Include("Address

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Angular 2 : Chain http requests with concat()