javascript - 如何以 Angular 返回 Observable/http/async 调用的响应？

Question

我的服务返回一个可观察对象，它向我的服务器发出 http 请求并获取数据。我想使用这些数据，但我总是得到 undefined。有什么问题？

服务:

@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!
  }
}

我检查了How do I return the response from an asynchronous call?发布但找不到解决方案

Answer 1

原因:

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

那么让我们看看 http 调用。

this.es.getEventList()

在您使用subscribe 实际发出(“触发”)您的http 请求后，您将等待 响应。在等待期间，javascript 将执行此代码下方的行，如果遇到同步赋值/操作，它将立即执行。

所以在订阅 getEventList() 并等待响应之后，

console.log(this.myEvents);

行将立即执行。在响应从服务器到达之前它的值是undefined(或者是你首先初始化它的任何东西)。

这类似于做:

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

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

---

**解决方案:**>那么我们如何克服这个问题呢？我们将使用回调函数，即 subscribe 方法。因为当数据从服务器到达时，它会在带有响应的“订阅”中。

因此将代码更改为:

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

将在一段时间后打印响应。

---

**你应该做什么:**

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

另外要提到的是，如果您来自 Promise 背景，则 then 回调对应于 subscribe with observables。

---

**你不应该做的事情:**

您不应该尝试将异步操作更改为同步操作(您做不到)。我们采用异步操作的原因之一是不让用户等待操作完成，而他们可以在该时间段内做其他事情。假设您的一个异步操作需要 3 分钟才能完成，如果我们没有异步操作，那么界面将卡住 3 分钟。

---

推荐阅读:

此答案的原始来源:How do I return the response from an asynchronous call?

但是随着 angular2 的发布，我们被引入了 typescript 和 observables，所以这个答案有望涵盖使用 observables 处理异步请求的基础知识。