导致Angular2中的http函数无法正确触发的原因

时间:2016-09-29 20:30:48

标签: node.js http angular

问题:从Angular2服务到NodeJS服务器的HTTP请求永远不会被调用。没有提供错误。

环境:从同一服务到同一个NodeJS服务器的许多其他调用都可以正常工作。只有这一个电话似乎有问题。没有错误发生,服务中的函数中的其他代码将数据记录到控制台工作正常。使用与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

节点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);
});

1 个答案:

答案 0 :(得分:2)

为什么从未调用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;
      })

  }

服务的主要变化是只需将返回命令添加到 .map(response =&gt; ...