如何在angular中从可观察的/http/async调用返回响应？

Question

我有一个服务，返回一个可观察到的，做一个超文本传输协议请求到我的服务器，并获得数据。我想使用这些数据，但我总是最终得到未定义的。有什么问题？

服务：

@Injectable()
export class EventService {

  constructor(private http: Http) { }

  getEventList(): Observable<any>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get("http://localhost:9999/events/get", options)
                .map((res)=> res.json())
                .catch((err)=> err)
  }
}

组成部分：

@Component({...})
export class EventComponent {

  myEvents: any;

  constructor( private es: EventService ) { }

  ngOnInit(){
    this.es.getEventList()
        .subscribe((response)=>{
            this.myEvents = response;
        });

    console.log(this.myEvents); //This prints undefined!
  }
}

我检查了如何从异步调用返回响应？发布，但找不到解决方案

Answer 1

如果仅在模板中使用myEvents，则可以使用asyncPipe。

下面是asyncPipe和Angular4 HttpClient示例

Answer 2

在angular/javascript中进行http调用是一种异步操作。所以，当您进行http调用时，它将分配新线程来完成此调用，并在下一行使用另一个线程开始执行。这就是为什么会得到未定义的值。因此，请进行以下更改以解决此问题

this.es.getEventList()  
      .subscribe((response)=>{  
       this.myEvents = response;  
        console.log(this.myEvents); //<-this become synchronous now  
    });

Answer 3

原因:

它未定义的原因是您正在进行异步操作。这意味着完成getEventList方法需要一些时间（主要取决于您的网络速度）。

让我们看看http调用。

this.es.getEventList()

使用subscribe实际发出（“激发”）http请求后，您将等待响应。在等待时，javascript将执行此代码下面的行，如果遇到同步分配/操作，它将立即执行这些行。

因此，在订阅getEventList（）并等待响应之后，

console.log（this.myEvents）

该行将立即执行。在响应从服务器（或您首先初始化它的对象）到达之前，它的值是未定义的。

这类似于：

ngOnInit(){
    setTimeout(()=>{
        this.myEvents = response;
    }, 5000);

    console.log(this.myEvents); //This prints undefined!
}

那么我们如何克服这个问题呢？我们将使用回调函数，它是订阅方法。因为当数据从服务器到达时，它将在响应的订阅中。

因此，将代码更改为：

this.es.getEventList()
    .subscribe((response)=>{
        this.myEvents = response;
        console.log(this.myEvents); //<-- not undefined anymore
    });

将打印响应。。过了一段时间。

除了记录响应之外，您的响应可能还有很多事情要做；当数据到达时，您应该在回调内（在subscribe函数内）执行所有这些操作。

另一件需要提及的事情是，如果您来自Promise背景，那么回调对应于subscribe，具有可观察性。

您不应该尝试将异步操作更改为同步操作（您不能）。我们使用异步操作的原因之一是不要让用户等待操作完成，而他们可以在这段时间内做其他事情。假设您的一个异步操作需要3分钟才能完成，如果我们没有异步操作，接口将冻结3分钟。

建议如下：

这个答案的最初功劳是：如何从异步调用返回响应？

但是在angular2版本中，我们被引入了打字稿和可观察性，所以这个答案有望涵盖处理可观察性异步请求的基础知识。