我了解使用 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;
}
“值”在返回时将为空，因为 get 是异步的。
通过查看角度源（https://github.com/angular/angular/blob/master/packages/http/src/backends/xhr_backend.ts#L46），很明显 XMLHttpRequest 的 async 属性不是习惯。XMLHttpRequest 的第三个参数需要设置为“false”，用于同步请求。
您的服务类：/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
}
}
请找到您的问题的代码下面是组件和服务文件。代码在同步时工作正常
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;
}
}
}
另一种解决方案是实现排序的优先级队列。
据我了解，除非您添加订阅者，否则不会执行 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
我看了看，找不到任何方法来使 HTTP 调用同步而不是异步。
所以解决这个问题的唯一方法是：将你的调用包装在一个带有标志的 while 循环中。在该标志具有“继续”值之前，不要让代码继续。
伪代码如下：
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');
}
如您所见，第一个回调等待来自请求的数据，您可以继续执行您的逻辑（或使用第三个）
例子：
.. subscribe( data => {
this.value = data;
doSomeOperation;
},
error => console.log(error),
() => {console.log("Completed");
or do operations here..;
}
});
如何使用 $.ajax(of jQuery) 或 XMLHttpRequest。
它可以用作异步。
您不应该尝试使 http 调用同步运行。从来不是一个好主意。
在您的getAllUser实现中，它应该从函数返回一个 observable，并且调用代码应该订阅，而不是您在方法本身内部创建订阅。
就像是
getAllUser(): Observable<UserDTO> {
return this.http.get("MY_URL")
.map(res => res.json());
}
在你调用代码时，你应该订阅并做任何你想做的事情。