2017-02-06 5 views
3

Angular2에서 50 개의 반복 루프를 실행하고 짝수 반복 만 GET 요청을 보내려는 구성 요소를 만들고 싶습니다. 이제 동기식 GET 요청을 보내려고합니다. 짝수 반복의 데이터가 수신되지 않을 때까지 루프는 대기하고 홀수 반복을 입력하지 않아야합니다. 어떻게 할 수 있는지에 대한 아이디어가 있습니까? 여기angular2의 동기 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"); 
    } 
} 

`나는 응답이도 반복 콘솔 메시지 순서에 와서해야? 이젠 문제가 분명하다 희망 출력 - And here's the output -

입니다 - 여기

서비스에 기록하는 기능입니다 홀수 대응 객체가 객체를 반환 한 경우에만 표시되어야합니다. 해결책을 제안하십시오. 그래서 내 강사의 도움으로

+0

동기화 요청은 웹 응용 프로그램에서 수행 할 수있는 최악의 작업 중 하나이며 Angular 자체는 지원하지 않습니다. 물론 정상적인 JS 방식을 사용하여해야한다고 생각한다면 그렇게 할 수 있습니다. –

+0

상황에 따라 그렇게해야합니다. 이것이 angular2에서 얻을 수있는 방법이 없습니까? –

+0

Angular2와 관련이 없습니다. 자바 스크립트에서이를 수행하는 방법을 검색 한 다음 Angular에서 동일하게 수행하십시오. 그리고 아니오, 그렇게해야하는 상황은 없습니다. 정상적인 방법이 있지만 실제로 해결하려고하는 문제에 대한 자세한 정보를 제공해야합니다. –

답변

1

, 우리는 마지막으로, 우리는 이러한 관찰 가능한을 concatented 부탁해 관찰 가능한 우리가 비동기 요청을 보내고 응답을 반환 wanted.We 무엇을 달성 번갈아 루프 반복에 반환 된 다음과 같은 출력 - output

달성

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

} 

component.ts - -

,691

이 내 코드 -

service.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)); 

    } 
    }