Question

我理解使用observable我可以在请求完成时执行一个方法，但是我怎么能等到http get完成并使用ng2 http返回响应？

git tag -d <tag>

＆＃34;价值＆＃34;返回时将返回null，因为get是异步..

Answer 1

通过查看角度源（https://github.com/angular/angular/blob/master/packages/http/src/backends/xhr_backend.ts#L46），很明显XMLHttpRequest的async属性未被使用。 XMLHttpRequest的第三个参数需要设置为＆＃34; false＆＃34;用于同步请求。

Answer 2

您的服务类：/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 3

请找到您问题的代码下面是组件和服务文件。并且代码正常工作

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 4

另一种解决方案是实现排序优先级队列。

据我所知，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

Answer 5

我看了一下，找不到使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');
}

Answer 6

如您所见，首先回调等待来自请求的数据在那里你可以继续你的逻辑（或使用第三个）

示例：

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

Answer 7

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

它可以用作asynchornize。

Answer 8

您不应该尝试使http调用同步。永远不是一个好主意。

来到你的getAllUser实现它应该从函数返回一个observable，调用代码应该订阅而不是你在方法本身内创建一个订阅。

像

这样的东西

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

在你调用代码时，你应该订阅并做任何你想做的事。

如何同步Angular2 http get？

8 个答案: