如何同步Angular2 http獲得

Question

我明白使用observable我可以在請求完成時執行一個方法，但我如何等待一個http 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; 
} 

「價值」的意志爲空時，其返回，因爲得到的是異步..

Answer 1

您不應該嘗試使http調用的行爲同步。從來不是一個好主意。

來到你的getAllUser實現它應該從函數返回一個observable，並且調用代碼應該訂閱而不是在方法本身內創建一個訂閱。

喜歡的東西

getAllUser(): Observable<UserDTO> { 
     return this.http.get("MY_URL") 
         .map(res => res.json()); 
} 

在你調用代碼，您應該訂閱，做任何你想要的。

Answer 2

JavaScript是單線程的，並作出同步HTTP請求將阻止整個瀏覽器同時等待響應。 請考慮這個不同的體系結構。

Answer 3

正如你看到的，第一個回調等待請求和 有一個數據，你可以繼續你的邏輯（或使用第三個）

例如：

.. subscribe(data => { 
       this.value = data; 
       doSomeOperation; 
       }, 
       error => console.log(error), 
      () => {console.log("Completed"); 
         or do operations here..; 
        } 
}); 

Answer 4

請查找代碼你的問題 下面是組件和服務file.And代碼是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; 
    } 


    } 
} 

Answer 5

通過觀察角源（https://github.com/angular/angular/blob/master/packages/http/src/backends/xhr_backend.ts#L46），顯而易見的是，沒有習慣了XMLHttpRequest的異步屬性。對於同步請求，XMLHttpRequest的第三個參數需要設置爲「false」。

Answer 6

如何使用$ .ajax（jQuery）或XMLHttpRequest。

它可以作爲asynchornize使用。

Answer 7

服務類：/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 
    } 

} 

Answer 8

另一種解決方案是實施排序的優先隊列。

從我理解的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