在 Angular 中等待 http 请求答案

【问题标题】：Wait for http request in Angular在 Angular 中等待 http 请求
【发布时间】：2018-11-13 13:56:49
【问题描述】：

我正在编写一个 Angular 应用程序。我有一个服务会发出这样的 http 请求：

export class PingService {

  constructor(
    private http: HttpClient) { }

  ping() {
    return this.http.get<{ip, type}>(this.apiRoutes.pingService);
  }
}

我在组件中调用此服务：

login(credentials) {
    this.invalidLogin = false;

    this.pingService.ping()
      .subscribe(data => {
        this.apiConfigService.changeNetwork(data.type);
      },
      error => {
        throw(error);
      });

    // MORE THINGS TO DO //

我想在执行// MORE THINGS TO DO // 之前等待pingService.ping() 完成。如何等待服务完成？

【问题讨论】：

更多的事情应该在subscribe里面..
将MORE THINGS TO DO移动到服务方法的订阅内
我知道我可以做到，但我想让 ping() 调用同步。这可能吗？

标签： javascript angular typescript http

【解决方案1】：

login(credentials) {
    this.invalidLogin = false;

    this.pingService.ping()
      .subscribe(data => {
        this.apiConfigService.changeNetwork(data.type);
        this.doMoreThings();
      },
      error => {
        throw(error);
      });
}

doMoreThings() {
  console.log('I am doing more things');
}

【讨论】：

有没有办法让 ping() 调用同步？
@trichetriche 你不是说同步的吗？
不，我的意思是异步的。该代码在运行下一段代码之前不会等待 ping 完成，因此是异步的。
但是在运行里面的任何东西之前不是没有等待 this.pingService.ping().subscribe 完成吗？因此是同步的？
里面是，后面不是。 OP 试图在调用后运行代码，而不是在其中运行。在我的解决方案中，情况正好相反。但无论如何，我明白你的意思，我想我们只是误会了！

【解决方案2】：

login(credentials) {
this.invalidLogin = false;

this.pingService.ping()
  .subscribe(data => {
    this.apiConfigService.changeNetwork(data.type);

    --> To here // MORE THINGS TO DO //
  },
  error => {
    throw(error);
  });

--> Move this    // MORE THINGS TO DO //

【讨论】：

有没有办法让 ping() 调用同步？
它已经是同步的了，它正在等待函数完成后再运行.subscribe()函数中的任何内容。

【解决方案3】：

不建议使用 Javascript 进行同步，尤其是在执行 http 请求时。伙计们已经写的方式是最好的方式。

【讨论】：

【解决方案4】：

我想补充一些关于其他答案的内容。

大多数情况下，您不应在任何 JavaScript 应用程序中“等待 http 请求”，因为它可能会阻塞 UI。想象一下，当连接丢失或网络不佳时，您的用户对您的应用执行了一些操作。这会导致 UI 被阻塞，直到请求结束或超时，这是非常糟糕的体验。

【讨论】：

同步请求的存在是有原因的：不要说never，而是most of the time。