Angular2 可观察时间？

Question

用例：调用一个服务 (movies.service.ts)，该服务将检查数据是否在 cookie 中，以及是否以 JSON 格式返回 cookie 数据。如果不是，则调用 http.get() 端点并将数据放入 cookie 中并返回。

我相信我的代码没问题？但是，当我从组件 (movies.component.ts) 调用此服务方法时，它会返回“未定义”。这是一个时间问题。在执行 console.log 之前，我需要能够知道它何时完成？

代码如下：

movies.service.ts

GetGenres() {
    //Check cookie first
    this.cookieService.delete('movie-genres');
    var cookieExists = this.cookieService.check('movie-genres');
    console.log(cookieExists);

    //if no cookie exists, call endpoint and set cookie
    if(!cookieExists) {
        //
        let headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
        let options = new RequestOptions({ headers: headers }); // Create a request option
        let url = 'https://api.themoviedb.org/3/genre/movie/list?language=en-US&api_key=' + this.apiKeyV3;
        let dto = {  };
        //All endpoints currently accept only HTTP GET requests.
        var response = this.http.get(url, options)
            .map(this.extractData)
            .catch(this.handleError);

        response
        .subscribe(
        res => {
            //next
            //this.genres = res.genres;
            console.log("next");
            this.cookieService.set('movie-genres', JSON.stringify(res.genres));
        },
        error => {
            var msg = { "Type": "Failure", "Message": <any>error };

        },
        () => { 
            //complete
            console.log('completed');  
            return this.cookieService.get('movie-genres');
        }
        );
    } 
    else {
        console.log('have cookie');  
        var cookie = this.cookieService.get('movie-genres');
        return cookie;
    }
}

movies.component.ts

 var response = this.moviesService.GetGenres();
 console.log(response); // this gets called before it finishes!

Answer 1

我将解释你的部分代码来说明问题：

 if(!cookieExists) {
      var response = // start making an async http request
      response.subscribe(
          // asynchronously handle the result of that request
      );
 }

请注意，这里没有“返回”。您确实在 async 位中有一个 return ，但这不是在您的函数“期间”运行的，所以它不算数。这就是你得到“未定义”的原因。您要做的是在response.subscribe() 之后添加return response，然后此函数的调用者可以执行this.moviesService.GetGenres().subscribe( () => { ... }。