什麼原因導致Angular2中的http功能無法正常觸發

問題：從Angular2服務到NodeJS服務器的HTTP請求永遠不會被調用。沒有提供錯誤。什麼原因導致Angular2中的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

節點的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); 
});

來源

2016-09-29 JasonPerr

如何你是否在調用'addAssetToProd（）'方法？ –

永不發出請求，或永遠不會得到響應。如果它永遠不會發出請求，你確定發送所述請求的代碼甚至運行嗎？ –

從來沒有提出請求，因爲我可以看我的節點日誌，我發現請求從來沒有進來。我知道3 console.log命令運行，因爲我可以看到他們的輸出在我的chrome開發工具區 – JasonPerr

的問題爲什麼對Node後端的調用是nev呃被調用是由於沒有訂閱調用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（響應=> ...

來源

2016-10-03 16:24:28 JasonPerr

什麼原因導致Angular2中的http功能無法正常觸發

回答

相關問題