Angular 5中如何获取http.get请求返回的数据？

嗨，我看你在Angular 5里处理Http.get请求时遇到了异步数据的问题，这其实是新手常踩的坑——异步操作的执行顺序搞反啦！

先说说你代码里的核心问题：http.get返回的是Observable，它的subscribe方法是异步执行的，也就是说，你写在subscribe外面的console.log(this.result)和if判断逻辑，会在请求还没拿到结果的时候就先跑了。而且你还把subscribe的返回值（一个Subscription对象）赋值给了this.apacheRunning，这根本不是你要的服务器响应结果，所以你的判断条件永远不会符合预期。

给你改一下代码，让它能正确处理异步请求：

import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

// ...

getApacheRunning(): Observable<string> {
  // 直接返回处理后的Observable，让调用方去订阅
  return this.http.get("http://localhost:3000/ison").pipe(
    // 处理成功响应
    map(result => {
      // 把响应转为字符串（根据后端返回格式调整，比如如果是JSON的话要先解析）
      const status = String(result);
      this.apacheRunning = status;
      console.log(`${status} DEBUG2`);
      return status;
    }),
    // 处理请求错误
    catchError(err => {
      console.log(err);
      this.apacheRunning = "false";
      console.log("DEBUG1");
      return of("false");
    })
  );
}

然后在调用这个方法的地方（比如组件里），你需要订阅这个Observable来获取结果：

// 假设这是在组件中调用服务的方法
this.yourServiceName.getApacheRunning().subscribe(status => {
  console.log("当前Apache运行状态：", status);
  // 这里可以根据状态做UI更新，比如显示不同的图标或文字
});

这样改的原因是：

• 我们用pipe结合map来处理成功的响应，把结果赋值给this.apacheRunning同时返回出去
• 用catchError捕获请求失败的情况，设置默认状态并返回
• 把处理后的Observable返回给调用方，让调用方在subscribe里处理后续逻辑——这才是Angular中处理异步请求的正确姿势，因为异步操作的结果只能在回调（或订阅）里拿到，不能像同步代码那样直接在函数里返回。

内容的提问来源于stack exchange，提问作者C. Dautermann