对后端的调用在服务内部正常工作，但在服务外部不正常答案

【问题标题】：Call to backend works properly inside service, but not outside service对后端的调用在服务内部正常工作，但在服务外部不正常
【发布时间】：2019-12-05 11:30:21
【问题描述】：

我正在尝试调用我的支持者，它在我的服务内返回数据很好，但是当我尝试在不同的模块中使用该服务时，它要么记录undefined 要么记录Observable。谁能指出我一个好的方向？我已经阅读过有关 observables 的信息，但我不是 100% 确定我得到了它们，或者此时我什至需要一个。在我告诉他们去哪里会引发错误之前，我在页面加载时遇到了问题。

无论如何，这里是对后端的调用，它会按预期注销游戏数据。这是我的服务范围内。

  async getAllGames() {
      this.http.get(this.url).subscribe(gameData => {
        console.log(gameData);
        return gameData;
      });
    }

但是当我从其他模块调用我的服务函数时，它返回 undefined。

async getGames() {
    const game = await this.games.getAllGames()
    console.log(game);
    _.each(game, (gameData) => {
      this.gamesArray.push(gameData);
    });

    // this.loadCharts(this.gamesArray);

  }

【问题讨论】：

它在您的服务中也不起作用。它只能访问异步方法中的数据。如果您尝试在服务中的其他任何地方记录它，您会看到相同的结果。您不能从订阅中返回/提取数据。它总是会返回一个可观察的，这意味着最终会发生某些事情，并且订阅只会在它发生时“捕获”它。如果你想要数据，你要么需要传递一个回调，要么改变一个变量
阅读这里订阅：rxjs-dev.firebaseapp.com/guide/subscription

标签： javascript angular typescript observable

【解决方案1】：

请勿在服务内部使用 subscribe。只需 return 和 Observable 服务，然后您可以在您需要的任何组件中 subscribe。

如下更改您的服务代码。

getAllGames(): Observable<any> {
    return this.http.get(this.url);
}

然后你可以subscribe到那个Observable你的任何组件如下。

this.games.getAllGames()
    .subscribe((res: any) => {
    // TODO: do what you need with response data
});

附言

如果您仍然需要subscribe内部服务，您应该return一个Promise。

getAllGames(): Promise<any> {
    return new Promise((resolve, reject) => {
      this.http.get(this.url).subscribe((res: any) => {
        resolve(res);
      }, (err: any) => {
        reject(err);
      })
   });
}

从您的任何组件调用 Promise。

this.games.getAllGames()
    .then(data => {
        console.log(data);
    })
    .catch(err => console.error(err))

StackBlitz

【讨论】：

【解决方案2】：

我建议这样的解决方案，让您可以使用相同的服务获取多个组件中的数据：

服务：

class APIService { 
    private url: '...'
    public getGames$;

    constructor(private http: HttpClient) {
        this.getGames$ = this.http.get(this.url);
    } 
}

组件：

private games;

constructor(private api: APIService) {
    this.service.getGames$.subscribe(games => {
       this.games = games;
    });
}

【讨论】：