Angular 角度服务方法执行顺序

我是个新手，现在正努力学习，但遇到了一个问题。 我在另一个组件中调用了一个简单的服务方法。但我有一个奇怪的执行顺序：

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

---

有人能解释一下它是怎么工作的吗？如何修复它？

subscribe（）方法之外的代码总是最后执行。如果它处于同一水平，那么它是在之前还是之后并不重要

要修复它而不是执行“get”方法，请使用全局变量并在ngOnInit（）上初始化它

weather:WeatherForecast=null；
恩戈尼尼特（）{
this.http.get（this.\uURL）.订阅(
数据=>{
这个。天气=数据；
}
)
}

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

---

我希望这对您有所帮助：）

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

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

如果您想显示结果，您可以将逻辑拆分，如下所示：

\u weatherForecast:weatherForecast=null；
calculateWeatherForecast（）{
this.http.get（this.uURL）.subscribe（（数据）=>{
这._weatherForecast=数据；
});
}
getWeatherForecast（）{
将此返回。\u天气预报；
}

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

{{getWeatherForecast（）}

这样做的好处是，每当您想显示天气预报时，您不会从服务器获取新数据。它使您能够更好地控制请求服务器提供新数据的频率和时间

编辑：

正如评论中指出的，当试图访问

\u weatherForecast

上的属性（在这种情况下，

摘要

）时，代码将中断。如果您想避免这种情况，您有两种选择：

将模板更改为：

{{getWeatherForecast（）？.summary}

将组件中的逻辑更改为：

您还可以将方法

getWeatherForecast（）

更改为

getWeatherForecast（）

。这样，您可以在模板中访问它，就像访问组件的属性一样，如下所示：

{{weatherForecast？.summary}

---

我希望这有帮助

代码中有两个部分：

同步

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

异步

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

解释

现在，由于对服务器的http请求需要一些时间。因此synchrons部分将继续执行，它不会等待get请求完成。因此，

console.log

[1]将首先执行

线路

返回此。weatherForcast

由于同步代码和未定义的返回而执行，这会导致控制台内出现错误[2]

然后，您的

subscribe

函数在稍后的某个时间点（get请求完成时）被调用，数据显示在控制台[3]中

---

希望有帮助：）如果需要更多解释，请告诉我：）

根据代码，执行顺序是正确的。发生的事情是，第一行启动一个http请求，该请求从代码的其余部分异步运行。请求启动后，其余代码将运行。您可能应该做的是，返回

this.http.get（…）

行，并在调用函数时订阅响应。谢谢，但在任何情况下，如果我需要从http调用中获取一些数据，我都需要等待。我已经如您所说进行了更改，但是如果在订阅函数之后执行任何其他代码，我如何从http调用中获取数据？即使我移动订阅ngOnInit的结果将是相同的。。。有趣。谢谢但是，如果我需要用响应进行smth，或者如果我有一些逻辑，该怎么办？我总是需要在subscribe方法中执行它？一般来说，是的。您向

subscribe

方法提供的回调只是在异步调用完成时“告诉”您，并让您有机会对结果数据进行处理。有了同步通话，你也会做类似的事情。等待数据到达，然后对其进行更改、存储、显示等。。。在这件事上有点不同。您无法将逻辑应用于尚未存在的数据。同样，在Angular中，您希望将保存和处理数据的代码“外包”给一个？我不这么认为

getWeatherForecast

将返回

undefined

它将返回

null

，但仅在第一次迭代中返回。一旦Angular检测到

\u weatherForecast

的变化，它将再次调用

getWeatherForecast（）

，然后返回一个值。但第一次仍在浏览器控制台中，将出现错误。好吗？如何避免呢？

weather :WeatherForecast = null;

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

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