Angular 2 Http没有触发答案

【问题标题】：Angular 2 Http get not triggeringAngular 2 Http没有触发
【发布时间】：2017-09-17 03:59:18
【问题描述】：

正如标题中所说，当我订阅我的 observable 时，什么都没有发生。控制台或构建过程中没有错误。这是我的代码：

我的服务

  getBlueCollars(): Observable<BlueCollar[]> {
return this.http.get(this.defaultAPIURL + 'bluecollar?limit=25').map(
  (res: Response) => {
    return res.json();
  });
}

我的组件

ngOnInit() {
    this.planifRequestService.getBlueCollars().subscribe(
      data => {
        this.blueCollars = data;
        console.log('Inner Blue Collars', this.blueCollars);
      },
      err => console.log(err)
    );
    console.log('Value BlueCollars : ', this.blueCollars);
}

所以第二个console.log 是用“Value BlueCollars : Undefined”触发的，我订阅的日志永远不会显示。同样，我在 Chrome 的“网络”选项卡中看不到发送的请求。

所以我尝试使用以下代码简化所有内容：

let response: any;
this.http.get('myUrl').subscribe(data => response = data);
console.log('TestRep: ', response);

同样的问题，没有错误，响应未定义。似乎订阅没有触发可观察的。（网址是正确的，它在我的招摇或邮递员上工作。）

我使用的是 Angular 2.4.9

编辑

所以我尝试在一个全新的项目中复制/粘贴我的请求代码，一切正常。请求被触发，我可以正确获得 JSON 响应。所以我的项目配置中可能有一些东西禁止请求正确触发。

【问题讨论】：

你的 Angular 应用程序的 URL 是什么，你调用的后端的 URL 是什么？它们是否具有相同的主机和端口？
我们能看到其余的组件代码吗？还是一个笨蛋？
据我所知，订阅的语法是正确的——订阅可以接受一个两个或三个函数作为参数，而 OP 有两个，这很好。
我在本地运行应用程序，而后端位于远程服务器上。我尝试使用 --disable-web-security --user-data-dir 参数启动 chrom 以禁用 CORS，但仍然无法正常工作。我在一个空组件中尝试了请求，但同样的问题。
如果你在控制台的任何地方都没有看到任何红色的东西，我认为这不是 cors 问题

标签： javascript angular angular2-http

【解决方案1】：

订阅调用之外的console.log 未定义的原因是订阅/http 调用异步发生，因此，实际上，代码运行的顺序（及时！）是：

1) observable 被订阅（然后等待响应） 2) 外部控制台日志以未定义的 blueCollars 运行 3) 当响应（或错误）从 http 请求返回时（可能在几秒钟后），this.blueCollar = data 的内部分配才会发生（以及内部控制台日志），否则将记录错误

除了订阅代码看起来不错...！

【讨论】：

嗯，我明白了，但我至少应该能够在 chrome 网络选项卡中看到请求，但事实并非如此。同样，我应该在控制台中看到“Inner Blue Collars”，但事实并非如此。
对不起，真正的问题是订阅回调显然没有显示它应该显示的日志。异步部分是正确的，但它没有解释主要问题。
是的，我知道，但我看不到订阅回调设置的任何问题

【解决方案2】：

尝试在您的服务代码中添加一个 catch 块：

getBlueCollars(): Observable<BlueCollar[]> {
  return this.http.get(this.defaultAPIURL + 'bluecollar?limit=25')
  .map(
    (res: Response) => {
      return res.json();
    })
  .catch(err => Observable.throw(err))
}

别忘了

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';`

我想这会导致错误，让您知道代码哪里出错了。

【讨论】：

感谢您的回答。我试图用良好的进口添加捕获，但没有发生任何事情。没有出现任何错误。

【解决方案3】：

好的，刚刚发现发生了什么。我正在使用假后端来尝试我应该只捕获指定 URL 的登录连接。但是，无论出于何种原因，它都捕获了所有请求，因此可以解释一切。谢谢大家的帮助。

【讨论】：

hi sa hagin me too 同样的问题终于我已经解决了这个问题欢呼