【问题标题】:Synchronous GET requests in angular2angular2中的同步GET请求
【发布时间】:2017-06-23 09:55:33
【问题描述】:

我想在 Angular2 中创建一个组件,其中将执行 50 次迭代的循环,并且我想仅在偶数迭代中发送 GET 请求。现在我想发送 同步 GET 请求,这样,除非没有收到来自偶数迭代的数据,否则循环应该等待而不进入奇数迭代。关于如何做到这一点的任何想法?

这是写在服务中的函数 - `

     getUser() {
     for(let i = 1;i < 10;i++) {
      if (i % 2 != 0) {         
      var resp =this.http.get('https://jsonplaceholder.typicode.com/users/'+i)
          .map(res=> res.json());

      if(resp){
      resp.subscribe(res=>{
        console.log(res);
      });
    }

  }
  else{
    console.log("even iteration");
  }
}

这是输出-

我希望问题现在已经清楚了。响应应该按顺序出现,并且偶数迭代控制台消息应该仅在奇数对应对象返回对象时显示。请提出解决方案。

【问题讨论】:

  • 同步请求是您在 Web 应用程序中可以做的最糟糕的事情之一,Angular 本身不提供任何支持。如果您认为必须这样做,当然也可以使用普通的 JS 方式。
  • 情况需要我这样做。有没有办法在 angular2 中实现这一点?
  • 这与 Angular2 无关。只需搜索如何在 JavaScript 中执行此操作,然后在 Angular 中执行相同操作。不,没有任何情况需要您这样做。有一些合理的方法,但您需要提供有关您实际尝试解决的问题的更多信息。
  • 因此,如果我通过发出异步请求而不是同步请求来解决上述问题,它会给我同样的结果吗?对不起,我是初学者,所以我不太了解。
  • 您可能会以不同的方式编写代码,但这是可能的。但我不知道你试图解决什么问题。请分享演示您尝试完成的代码。

标签: api http angular get synchronous


【解决方案1】:

所以在我的导师的帮助下,我们终于实现了我们想要的。我们发送异步请求并将响应作为 observables 返回。现在我们将这些 observables 连接起来,在交替循环迭代中返回并实现以下输出 -

这是我的代码-

service.ts -

getUser(i: number): Observable<any>{
  return this.http.get('https://jsonplaceholder.typicode.com/users/' + i)
    .map(res => res.json());

 }

component.ts -

import {Component, OnInit} from '@angular/core';
import {AppService} from "./app.service";
import {Observable} from 'rxjs/Rx';

 @Component({
 selector: 'app',
 templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit {


  name:string;
  call: Observable<any>;

   constructor(private _service: AppService) {}

    public ngOnInit() {

   }

  getUser(){
    this.call = Observable.concat();
   for(let i=1;i<=10;i++) {
     if(i%2!=0){
       this.call = this.call.concat(this._service.getUser(i));
      }
     else{
       this.call = this.call.concat(Observable.create(x=> {x.next(i)}).first());
      }
    }
        this.call.subscribe(res=>console.log(res));

    }
  }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-03-26
    • 2016-01-22
    • 1970-01-01
    • 2017-04-26
    • 1970-01-01
    • 2018-01-31
    • 1970-01-01
    相关资源
    最近更新 更多