是什么导致Angular2中的http函数无法正确触发答案

【问题标题】：What causes http functions in Angular2 to not trigger properly是什么导致Angular2中的http函数无法正确触发
【发布时间】：2017-02-08 07:40:23
【问题描述】：

问题：从 Angular2 服务到 NodeJS 服务器的 HTTP 请求永远不会被调用。未提供任何错误。

环境：从同一个服务到同一个 NodeJS 服务器的许多其他调用都可以工作。只有这 1 个电话似乎有问题。没有错误发生，将数据记录到控制台的服务中的其他代码工作正常。在 Postman 中对 Angular2 服务中的节点使用完全相同的调用没有问题。它仅在 Angular 内部运行时不起作用。

assets.component.html

<button type="button" class='btn btn-primary'
        [class.selected]="asset === selectedAsset"
        (click)="addToProd(asset)">
  Add to Production
</button>

assets.component.ts

  addToProd(asset) {
    this.productionService.addAssetToProd(this.selectedAsset, this.prodToAddTo)
  }

production.service.ts

  addAssetToProd(asset, prod) {
    const headers = new Headers({'Content-Type': 'application/json'});
    const token = localStorage.getItem('token') ? '?token=' + localStorage.getItem('token') : '';
    console.log('token is ', token);
    console.log('asset ID: ', asset.assetId);
    console.log('production ID: ', prod.productionId);

    //TODO: Why does this work in Postman but not Here????
    return this._http.get('http://'+globals.pc_local_ip+':3000/production/addAsset/' + asset.assetId + '/' + prod.productionId + token)
      .map(response => {
        console.log('response is ', response)
      })
      .catch(error => Observable.throw(error.json()));
  }

来自运行时上述项目的控制台日志

token is: ?token=yJhbGciOiJIUzI1Ni...
asset ID:  4f678f3c-620f-476d-bec2-a3646896fa84
production.service.ts:87 production ID:  bd54aeb0-ff00-4ec0-880f-9d0520369c66

Node Application.js

...    
var productionRoutes = require('./routes/productions');    
app.use('/production', productionRoutes);
...

节点 /routes/productions.js

router.get('/addAsset/:asset/:prod', function(req, res, next) {
  console.log('req is', req);
});

【问题讨论】：

如何调用addAssetToProd() 方法？
从不发出请求，或从不得到响应。如果它从不发出请求，您确定发送所述请求的代码甚至会运行吗？
从不发出请求，因为我可以查看我的节点日志并且我看到请求永远不会进入。我知道 3 个 console.log 命令运行，因为我可以在我的 chrome 开发工具中看到它们的输出面积
为什么一个问题会在 stackExchange 中被否决？

标签： node.js http angular

【解决方案1】：

为什么从未调用过对 Node 后端的调用的问题是由于缺少对调用 http 方法的服务的订阅引起的。

我从没想过这是必需的。因为我不需要从这个节点调用中接收任何返回，所以我不在乎订阅它。 我认为这应该可行，但我错了。

一旦我在组件的函数中添加了订阅方法。这一切都开始起作用了。更新后的工作代码如下：

assets.component.ts

  addToProd() {
    this.productionService.addAssetToProd(this.selectedAsset, this.prodToAddTo)
      .subscribe(
        response => {
          console.log('response is here: ', response)
        }
      );
  }

请注意，资产组件的主要区别在于添加到末尾的 .subscribe。

production.service.ts

  addAssetToProd(asset, prod) {
    const aaHeaders = new Headers({'Content-Type': 'application/json'});
    const aaToken = localStorage.getItem('token') ? '?token=' + localStorage.getItem('token') : '';
    console.log('aaToken is ', aaToken);
    console.log('asset ID: ', asset.assetId);
    console.log('production ID: ', prod.productionId);

    return this.http.get('http://'+globals.pc_local_ip+':3000/production/addAsset/' + asset.assetId + '/' + prod.productionId + aaToken)
      .map(response => {
        return response;
      })

  }

服务的主要变化是简单地将 return 命令添加到 .map(response => ...

【讨论】：