web-dev-qa-db-ja.com

Angular2 http getを同期する方法は？

Observableを使用すると、リクエストの完了時にメソッドを実行できますが、ng getが完了するまで待機し、ng2 httpを使用して応答を返すにはどうすればよいですか？

getAllUser(): Array<UserDTO> {
    this.value = new Array<UserDTO>();
    this.http.get("MY_URL")
                    .map(res => res.json())
                    .subscribe(
                        data => this.value = data,
                        err => console.log(err),
                        () => console.log("Completed")
    );

    return this.value;
}

「値」は、getが非同期であるため、返されるときにnullになります。

javascriptangulartypescriptangular2-http
20
Hulk

サービスクラス：/project/app/services/sampleservice.ts

    @Injectable()
    export class SampleService {

      constructor(private http: Http) {
      }

      private createAuthorizationHeader() {
         return new Headers({'Authorization': 'Basic ZXBossffDFC++=='});
      }


      getAll(): Observable<any[]> {
        const url='';
        const active = 'status/active';
        const header = { headers: this.createAuthorizationHeader() };
        return this.http.get(url + active, header)
          .map(
            res => {
              return res.json();
            });
      }

    }

コンポーネント：/project/app/components/samplecomponent.ts

export class SampleComponent implements OnInit  {


  constructor(private sampleservice: SampleService) {
  }

  ngOnInit() {
   this.dataset();
  }

  dataset(){
    this.sampleservice.getAll().subscribe(
      (res) => {
        // map Your response with model class
        // do Stuff Here or create method 
        this.create(res);
      },
      (err) => { }
    );
  }
  create(data){
   // do Your Stuff Here
  }

}
3
Dharan G

enter image description here angular source（ https://github.com/angular/angular/blob/master/packages/http/src/backends/xhr_backend.tsを見て＃L46 ）、XMLHttpRequestのasync属性が使用されていないことは明らかです。XMLHttpRequestの3番目のパラメーターは、同期要求に対して「false」に設定する必要があります。

3
Suresh

別の解決策は、並べ替えの優先度キューを実装することです。

私が理解していることから、サブスクライバーを追加するまで、HTTP要求は実行されません。したがって、次のようなことができます。

Observable<Response> observable = http.get("/api/path", new RequestOptions({}));

requestPriorityQueue.add(HttpPriorityQueue.PRIORITY_HIGHEST, observable,
                 successResponse => { /* Handle code */ }, 
                 errorResponse => { /* Handle error */ });

これは、requestPriorityQueueがコンポーネントに注入されたサービスであると想定しています。優先度キューは、エントリを次の形式で配列に保存します。

Array<{
    observable: Observable<Response>, 
    successCallback: Function, 
    errorCallback: Function
}>

配列に要素を追加する方法を決定する必要があります。最後に、バックグラウンドで次のことが行われます。

// HttpPriorityQueue#processQueue() called at a set interval to automatically process queue entries

processQueueメソッドは次のようになります。

protected processQueue() {
    if (this.queueIsBusy()) {
        return;
    }

    let entry: {} = getNextEntry();
    let observable: Observable<Response> = entry.observable;

    this.setQueueToBusy(); // Sets queue to busy and triggers an internal request timeout counter.
    observable.subscribe()
        .map(response => {
            this.setQueueToReady();
            entry.successCallback(response);
        })
        .catch(error => {
            this.setQueueToReady();
            entry.errorCallback(error);
        });
}

新しい依存関係を追加できる場合は、次のNPMパッケージを使用してみてください： async-priority-queue

0
Je Suis Alrick

見てみると、非同期の代わりにHTTP呼び出しを同期する方法が見つかりませんでした。

したがって、これを回避する唯一の方法は、呼び出しをフラグ付きのwhileループでラップすることです。そのフラグの値が「continue」になるまでコードを継続させないでください。

次のような擬似コード：

let letsContinue = false;

//Call your Async Function
this.myAsyncFunc().subscribe(data => {
   letsContinue = true;
}; 

while (!letsContinue) {
   console.log('... log flooding.. while we wait..a setimeout might be better');
}
0
eDriven_Levar

あなたの問題のコードを見つけてください以下はコンポーネントとサービスファイルです。そしてコードはsynchornizeのためにうまく機能しています

import { Component, OnInit } from '@angular/core';
import { LoginserviceService } from '../loginservice.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  model:any={};
  constructor(private service : LoginserviceService) { 
}

ngOnInit() {

}
save() {
   this.service.callService(this.model.userName,this.model.passWord).
   subscribe(
      success => {
        if(success) {
            console.log("login Successfully done----------------------------    -");
            this.model.success = "Login Successfully done";
     }},
    error => console.log("login did not work!")
  );
 }

}

以下はサービスファイルです。

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { UserData } from './UserData';
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/toPromise'
import {Observable} from 'rxjs/Rx'

@Injectable()
   export class LoginserviceService {
   userData = new UserData('','');   
   constructor(private http:Http) { }

    callService(username:string,passwrod:string):Observable<boolean> {
     var flag : boolean;      
     return (this.http.get('http://localhost:4200/data.json').
       map(response => response.json())).
        map(data => {
          this.userData = data;
          return this.loginAuthentication(username,passwrod);
        });
      }

  loginAuthentication(username:string,passwrod:string):boolean{
     if(username==this.userData.username && passwrod==this.userData.password){
        console.log("Authentication successfully")
        return true;
   }else{
     return false;
   }


  }
}
0
stackinfostack