当订阅Angular + .NET Core MVC应用程序中的Observable时，获取“SyntaxError：意外的令牌<位于位置0的JSON中”

问题描述：

我安装了如此post中所述的Microsoft.AspNetCore.SpaTemplates，并使用dotnet new angular来创建新项目。基地网站运行良好;我正在使用Visual Studio 2017.当订阅Angular + .NET Core MVC应用程序中的Observable时，获取“SyntaxError：意外的令牌<位于位置0的JSON中”

我添加了一个简单的http获取服务。数据恢复正常，我将其作为Observable返回给调用者;从那里我订阅Observable并对数据进行一些操作。这就是问题来了..如果我订阅了观察的，它抱怨：

Exception: Call to Node module failed with error: SyntaxError: Unexpected token < in JSON at position 0

奇怪的是，如果我先运行该网站没有订阅，使其运行，然后添加订阅，HMR这样做，更新浏览器，一切都很好。但每次手动刷新浏览器后，或者尝试重新运行该网站时，都会引发错误。

的代码：

home.component.ts：

import { Component, OnInit } from '@angular/core'; 
import { HomeService } from './home.service'; 

@Component({ 
    selector: 'home', 
    templateUrl: './home.component.html' 
}) 
export class HomeComponent implements OnInit { 

    constructor(private homeService: HomeService) {} 

    ngOnInit(): void { 
     this.homeService.getData(5) 
      .subscribe(res => console.log(res)); 
    } 
}

home.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 


@Injectable() 
export class HomeService { 
    private _apiUrl = 'http://localhost:1234/api'; 

    constructor(private http: Http) { } 

    getData(count: number): Observable<any> { 
     return this.http 
      .get(`${this._apiUrl}/Foo/${count}`, { withCredentials: true }) 
      .map(response => response.json()) 
    } 
}

我知道来自web api的数据是有效的JSON。失败的部分是当我尝试订阅Observable时，我不知道它为什么在抱怨。如果我这样做了以下内容：

ngOnInit(): void { 
    console.log('observable', this.homeService.getData(5)); 
}

..然后它打印出的可观测对象到控制台就好了。

任何想法？

您的api可能不会返回jason数据通过调用'response.json（）'抛出的错误它无法将您的响应主体转换为json尝试在您的可观察地图中调用console response.body –

当我访问我的数据本地，我的apiUrl不*包含本地主机信息。我的例子看起来像这样：'private baseUrl ='api/products';'如果您只是将url更改为'api'，会发生什么？ – DeborahK

@BabarBilal如果我使用response.body，我收到一个错误“Property'body'在类型'Response'中不存在”。我知道当我在Postman中测试它时，api会返回有效的JSON ..它看起来像[{“var1”：123，...}] – Jerms

答

我在看@ DeborahK的Angular-Routing回购的可观察的例子，并意识到我没有处理调用者的错误。

我改变了代码的组件是这样的：

this.homeService.getData(5) 
    .subscribe(
     (res) => console.log(res), 
     (err) => console.log(err) 
    );

，不再收到错误。谢谢！

当订阅Angular + .NET Core MVC应用程序中的Observable时，获取“SyntaxError：意外的令牌<位于位置0的JSON中”

相关推荐