Angular服务方法执行顺序

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 操作通常设计为 non-blocking 这一事实有关。通过 http.get 设置请求就是这样一个 non-blocking 操作。这需要时间才能完成，同时您的其他代码将首先运行。

您不希望您的应用在等待服务器 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 时从服务器获取新数据。它使您可以更好地控制向服务器请求新数据的频率和时间。

编辑：

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

将您的模板更改为：

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

将组件中的逻辑更改为：

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

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

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

希望对您有所帮助！

Answer 3

您的代码中有 2 个部分：

同步

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

异步

订阅方法中的部分是异步的，即它只会在 get 请求完成时执行（响应是 returned）。

说明

现在向服务器发送http请求需要一些时间。所以 synchrouns 部分将继续执行，它不会等待 get 请求完成。所以 console.log [1] 将首先执行。

行

return this.weatherForcast

由于同步代码和 return 未定义导致控制台 [2]

内发生错误，接下来将执行

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

希望对您有所帮助:) 如果您需要更多解释，请告诉我:)

Angular服务方法执行顺序

Angular service method execution order

angular-services

angular

angular-httpclient