Question

我是Angular的新手，现在尝试学习它并遇到问题。我有一个简单的服务方法，在另一个组件中调用。但是我的执行顺序很奇怪：

您可以在控制台浏览器中看到它：

任何人都可以解释一下它是如何工作的吗？以及如何解决？

Answer 1

subscribe（）方法之外的代码始终在最后执行。相同级别之前还是之后都没关系。

要修复此问题而不是执行“ get”方法，请使用全局变量，然后在ngOnInit（）上对其进行初始化。

weather :WeatherForecast = null;

ngOnInit(){
  this.http.get<WeatherForecast>(this._url).subscribe(
    data => {
       this.weather = data;
    }
  )
}

我建议您在component.ts和服务之间组织http调用，以使其更加独立。

希望对您有所帮助：）

Answer 2

这与以下事实有关：I / O操作通常被设计为非阻塞的。通过http.get设置请求是一种非阻塞操作。这需要时间才能完成，与此同时，其他代码将首先运行。

您不希望在等待服务器5秒钟响应时冻结应用程序吗？

如果您想显示结果，则可以为此分配逻辑，

_weatherForecast: WeatherForecast = null;

calculateWeatherForecast() {
  this.http.get<WeatherForecast>(this._url).subscribe((data) => {
      this._weatherForecast = data;
  });
}

getWeatherForecast() {
    return this._weatherForecast;
}

这样，您可以独立于显示数据而获取数据。 Angular会检测到变量的变化并呈现结果。在您的模板中，您只需执行以下操作：

<div>{{getWeatherForecast()}}</div>

这样做的好处是，每次要显示weatherForecast时，您都不会从服务器获取新数据。它使您可以更好地控制向服务器请求新数据的频率和时间。

编辑：

正如注释中指出的那样，当尝试访问summary上的属性（在这种情况下为_weatherForecast）时，代码将中断。如果您想避免这种情况，则有两种选择：

将模板更改为：

<div>{{ getWeatherForecast()?.summary }}</div>

将组件中的逻辑更改为：

getWeatherForecast() {
    if(this._weatherForecast) {
        return this._weatherForecast.summary;
    }
}

您也可以将方法getWeatherForecast()更改为get weatherForecast()。这样，您可以像在组件的属性中一样在模板中访问它，就像这样：

<div>{{ weatherForecast?.summary }}</div>

希望对您有帮助！

Answer 3

您的代码中有2部分：

同步

您的subscription方法之外的部分是同步的，即它将在您的程序执行流程之后立即执行。

异步

subscribe方法中的部分是异步的，即，仅当get请求完成（返回响应）时才会执行。

说明

现在，由于对服务器的http请求将花费一些时间。因此syncuns部分将继续执行，并且不会等待get请求完成。因此console.log [1]将首先执行。

行

return this.weatherForcast

接下来由于同步代码而执行，并返回undefined，这会导致控制台[2]内部发生错误

随后，您的subscribe函数将在稍后的某个时间（获取请求完成时）被调用，并在控制台[3]中显示数据。

希望它会有所帮助：）如果您需要更多说明，请告诉我：）

角服务方法执行顺序

3 个答案: